# Form section

How a long form is laid out: a 240px left column with the section title and one line of context, the fields in a two-column grid on the right. One column on the phone.

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** Separator
- **Build:** Layout only; `Separator` for the hairline.
- **In apps/admin today:** `ui/separator.tsx` exists.
- **Client component:** no. 

## Content rules

- Section titles are nouns ("Pricing", "Photos").

## Do

- Pair with the Save bar on long pages.

## Don't

- Nest sections.

## Accessibility

- **Keyboard:** Reading order: head, then fields left to right.
- **ARIA:** Each section a `<fieldset>` or `<section aria-labelledby>`.
- **Focus:** On submit with errors, focus the first invalid field.

## Tokens

`--s-8` `--s-6` `--border` `--w-semibold` `--text-section` `--lh-section` `--font-voice` `--tr-section` `--text-small` `--muted-foreground` `--s-3` `--s-5`

## Files

`form-section.html` live specimen · `form-section.css` kit rules · `form-section.d.ts` props · full page: `docs/components/form-section/` (phone: `m/`).