# Field layout

The label, control, help text and error stack every input shares. Labels sit above the control in Archivo 600; help and errors sit below in 11.5px.

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** Label, Form
- **Build:** shadcn `Form` (react-hook-form + zod) with `FormField`, `FormLabel`, `FormDescription`, `FormMessage`; `Label` (Radix Label).
- **In apps/admin today:** `ui/label.tsx` exists. `form.tsx` does not.
- **Client component:** yes. Form state (react-hook-form) runs in the client.

## Content rules

- Labels are nouns ("Handle", "Recommended price"); never instructions.
- Help says what the value is used for, not how to type it.
- Errors: what is wrong and the fix ("Handle is taken. Try navy-birdseye-two-piece-2").

## Do

- Validate on blur and on submit, not on every key.

## Don't

- Placeholder as label.
- Labels that explain the UI.

## Accessibility

- **Keyboard:** Clicking the label focuses the control.
- **ARIA:** `<label for>` or wrap; help and error joined with `aria-describedby`; error sets `aria-invalid="true"`.
- **ARIA:** Required: `aria-required` / `required`, never colour alone.
- **Focus:** Focus lives on the control, not the label.

## Tokens

`--font-voice` `--font-stretch-title` `--text-label` `--w-semibold` `--w-regular` `--text-small` `--font-ui` `--muted-foreground` `--text-micro` `--destructive` `--s-2` `--s-3`

## Files

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