Forms

How to collect input so it's fast to complete and hard to get wrong. A pattern, not a component — it composes Field, Input, Select, and Button into a predictable layout.

Anatomy

A single column of labelled fields, grouped by meaning, with the primary action at the end. One question per row keeps the form scannable.

Choosing a control

SituationControlWhy
One choice from ≤7 stable optionsSelectShort closed list, no search needed
Long or open-ended listComboboxTyping to filter beats scrolling
Multiple selections from a listCombobox (multi)Tags-style selection
2–3 visible mutually exclusive optionsRadioGroupAll options visible at once
Boolean toggleSwitch or CheckboxSwitch for immediate effect, Checkbox for form submit
Triggering actions (Edit, Delete)DropdownMenuNOT inside a form — it doesn't hold a value

Validation

  1. Validate on blur or submit — never on every keystroke (punishes mid-thought).
  2. Show errors next to the field — not in a toast or at the top of the form.
  3. Write errors as a fix — "Enter a date in the future", not "Invalid date".
  4. Don't disable submit silently — if submit is disabled, tell the user what's missing.

Guidelines

Do
  • Use a single column — multiple columns invite skipped fields.
  • Group related fields and separate groups with space, not just dividers.
  • Mark optional fields, or required ones — pick one convention and hold it everywhere.
  • Validate on blur or submit, and show the error next to the field it belongs to.
  • Write errors as a fix: "Enter a date in the future", not "Invalid date".
Don't
  • Don't place two unrelated fields side by side just to save vertical space.
  • Don't scatter the primary action — keep one primary button, at the end of the flow.
  • Don't use placeholder text as the label; it disappears the moment a user types.
  • Don't validate on every keystroke — it punishes people mid-thought.
  • Don't disable the submit button without telling the user what's still missing.
  • Don't use Select for dozens of options — a closed scrolling list is slower than typing to filter.
  • Don't add a Combobox's search field to 3–4 fixed options; it's overhead the user doesn't need.
  • Don't use DropdownMenu inside a form — it triggers actions, not value selection.