Complex editorial forms

Use grouped fields and named sections to make a long form understandable without hiding its state.

On this page

Task and context

Use grouped fields and named sections to make a long form understandable without hiding its state.

Flow and composition

Flow and composition
Stage	Interface responsibility
Structure	AdminPageHeader, one deliberate form, panels and AdminField groups.
Navigate	Details/Content/Publishing/Notes tabs expose related sections.
Explain	Field descriptions clarify editorial consequences.
Submit	Named primary action and visible save feedback.

Decisions and handoff

Use native select for constrained enums, textarea for short multi-line copy and the rich editor for structured body.
Set non-submit button types explicitly.
A field label names the input; help copy describes its purpose.

Recovery and acceptance

Associate validation text with its field and focus the first actionable error.
Check that switching tabs does not lose unsaved values.
Review required/error states and hidden invalid inputs in a safe form test.

Source references

Source references
File	Responsibility
components/admin-ui.tsx	Audited Townwell implementation; use this file when extending this interface.
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.