Form

Form + FormItem — primitives.

primitivesstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

Edit JSX — preview updates livereact-live

import { Form, FormItem } from "@avala/design";

<Form>
  <FormItem />
</Form>

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-form--defaultOpen in Storybook →

**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.

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.