Editor tabs

Group a substantial editor without discarding hidden sections or confusing navigation with submission.

On this page

Purpose and placement

Group a substantial editor without discarding hidden sections or confusing navigation with submission.

Anatomy

Anatomy
Part	Behavior
Tab strip	Named section buttons.
Panels	Mounted tabpanel children; inactive panels use hidden.
Trailing area	Optional contextual status/actions.

Configuration and contract

Configuration and contract
Input or decision	Implementation
AdminEditTabs	tabs with id, label and children; trailing optional.
Selection	First available tab initializes selection; children-less tabs are omitted.
ARIA	tablist, tab, aria-selected, aria-controls and labelled tabpanel IDs.

States and feedback

Native story Details, Content, Publishing and Notes screens captured.
Component specimen shows Content and selected Media panels.
No panels means no tabset.

Usage rules

Give tabs domain names rather than Step 1 unless the task is actually sequential.
Keep one save contract across panels when they belong to the same form.
Do not reset unsaved data simply by changing panels.

Accessibility and verification

The source implements ARIA relationships but lacks roving tab index and arrow-key navigation in the inspected component. Treat that as an improvement to complete before claiming a fully conformant tab pattern.

Source references

Source references
File	Responsibility
components/admin/admin-edit-tabs.tsx	Audited Townwell implementation; use this file when extending this interface.
components/admin/story-editor-form.tsx	Audited Townwell implementation; use this file when extending this interface.

Examples from the app

Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.