Compose a complete form.

Ten form building blocks, one token language. Try validation, keyboard navigation, native form values, and reset below.

Compose the field, keep the control.

Field links one control to its label, description, error, and required state. Each control keeps its native events, attributes, and ref. Use FieldSet and FieldLegend for related controls.

<Field label="Work email" description="Use your work address." error={error} required>
  <Input name="email" type="email" autoComplete="email" />
</Field>

<RadioGroup label="Visibility" name="visibility" defaultValue="team"
  options={[{ value: 'team', label: 'Team' }, { value: 'private', label: 'Private' }]}
/>

Validation belongs to your form.

This example validates on submit, connects each error to its control, announces a summary, and focuses the first invalid field. It simulates a save in memory; it has no backend connection or persistent storage. Native FormData reads values from named controls.

Controlled state and reset

Use value/checked with change handlers for controlled state, or defaultValue/defaultChecked for browser-owned state. A native reset restores uncontrolled defaults. Reset controlled values and a controlled mixed checkbox state in your application’s reset handler. Do not switch a control between controlled and uncontrolled modes.

Keyboard and labels

Tab moves through controls and buttons. Space toggles checkboxes and switches; native radios use arrow keys. Native selects follow the browser’s keyboard and mobile picker behavior. Give every standalone control a Label or accessible name. ButtonGroup keeps each action in the normal Tab sequence.