Form Section Pattern

Break long forms into labelled sections people can scan instead of read.

moderate Forms & Input

What it adds

A section pattern grouping related fields under a heading, a description, and its own actions.

What your agent is told to do

1
Find the forms that have grown past a screenful — settings, profiles, checkout, configuration — and group their fields by the question each group answers, not by the table the columns come from.
2
Give each section a heading in the document's heading order and an optional one-line description, so screen reader and keyboard users can jump between sections.
3
Allow at most one level of nesting. A section inside a section inside a tab gives the user no orientation and pushes the fields into a narrow gutter.
4
When validation fails, expand or scroll to the first section holding an error and mark every other affected section, so nothing stays hidden inside a collapsed group.
5
Do not treat sections as a substitute for splitting a genuinely multi-stage process. If the steps are sequential and have their own save points, that is a job for Stepper Component; sections group fields on one page.

Edge cases it handles

Nesting sections more than one level deep destroys the scannability the pattern exists for — flatten, or split into separate pages.
A collapsed section containing an invalid field must open on submit; leaving a hidden error with only a generic form-level failure message strands the user with no way to find it.
Section-level actions such as add another or reset must stay reachable when the section is long, and must not be confused with the form's primary submit.
On narrow screens the section heading, description, and fields need reduced vertical rhythm rather than the desktop spacing, or the form becomes an endless scroll.
A section whose fields are all hidden by conditional logic must disappear entirely rather than leaving a heading with nothing under it.
Collapsed state must not unmount the fields, or their values and validation state will be lost when the user opens the section again.
Sections must not each own a save button while the form also has one — decide whether saving is per section or per form and apply it consistently.

Definition of done

Long forms are grouped into sections with headings in correct document order.
Nesting never exceeds one level.
Submitting an invalid form reveals every section containing an error.
Collapsing a section preserves its field values and validation state.
Sections with no visible fields are removed rather than left empty.
Spacing adapts on narrow viewports without changing the grouping.
The feature matches the existing design system.
No existing functionality is broken.

Related features

Unit Converter

Field State Matrix

Code Editor Field

How it works

1

Copy the link

Grab the Markdown instruction URL for this feature.
2

Give it to your AI

Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
3

It inspects, then implements

Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.