Form

input

Form primitives: Field wires label, hint, and error a11y to any control. Pair with Input,Select, Checkbox,RadioGroup, and Switch.

Preview

Scale1.00

Full name

As it appears on your ID

Please enter a valid email address

Department

Send email notifications

Support tierBasicStandardPremium

Account active

Usage

import { Field, Input, Select, Checkbox } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<Field label="Email" hint="We'll never share it" error={errors().email}>
  {(props) => <Input {...props} type="email" />}
</Field>

<Select
  placeholder="Pick one"
  options={[{ value: 'a', label: 'Option A' }]}
/>

<Checkbox label="Agree to terms" />

Props

Component	Prop	Type	Default	Description
`Field`	`label`	`string`	--	Visible label text
`Field`	`hint`	`string`	--	Hint text below the label
`Field`	`error`	`string`	--	Error message; sets `aria-invalid`
`Field`	`required`	`boolean`	`false`	Adds required indicator to label
`Input`	`type`	`'text' \| 'email' \| 'password' \| ...`	`'text'`	HTML input type
`Input`	`value`	`string`	--	Controlled value
`Input`	`onChange`	`(value: string) => void`	--	Change handler
`Select`	`options`	`SelectOption[]`	--	Available options (value, label, disabled)
`Select`	`placeholder`	`string`	--	Disabled placeholder option text
`Checkbox`	`checked`	`boolean`	`false`	Controlled checked state
`Checkbox`	`label`	`string`	--	Inline label beside the checkbox
`RadioGroup`	`legend`	`string`	--	Group label rendered as `<legend>`
`RadioGroup`	`options`	`RadioGroupOption[]`	--	Radio options (value, label, disabled)
`Switch`	`checked`	`boolean`	`false`	Controlled on/off state
`Switch`	`label`	`string`	--	Visible label beside the switch

Accessibility

Field wiring: Field auto-generates id/for pairing, aria-describedby (hint + error ids), and aria-invalid.
Error announcement: Error messages use role="alert" for live-region announcement.
RadioGroup: <fieldset> with role="radiogroup" and <legend>. Arrow keys move selection (single tab-stop).
Switch: role="switch" with aria-checked. Toggles on Space and Enter.
Focus: All controls show a visible :focus-visible ring.

Do / Don't

Do

Wrap every input in a Field so labels, hints, and errors are wired automatically. Mark required fields with required.

Don't

Don't use placeholder text as a substitute for labels. Don't disable the submit button as the only form validation signal.