← Components/primitives

Form

Form + FormItem — primitives.

primitivesstablea11y: untested3/3 coverageEdit on GitHub ↗
primitives-form--defaultOpen all variants →

When to use

  • **Form** — wrap any form surface that submits data. Use asForm={false} inside a Dialog where the host already owns the <form> element.
  • **FormItem** — every label-control-helper row. Replaces inline <div className="flex flex-col gap-2"> patterns.

When not to use

  • Grouping ≥ 3 related inputs (e.g. address: street / city / zip) → use `FormGroup` (a <fieldset> + <legend> wrapper).
  • Forms inside a controlled state machine (BLoC-like) where you don't want a native <form> submit handler — render Form asForm={false}.
  • Single-control surfaces (one TextInput at the top of a page) — just render the control directly.