Forms
Field compound, primitive controls, and specialised inputs. Every sample below is exhaustive — each labeled row shows every size, state, and variant so nothing is hidden. All a11y-wired out of the box.
Live validation
A working form wired with the real useForm hook — validates on blur and submit, shows dynamic errors, disables submit until valid, and confirms success. Not static states: type an invalid value and blur to watch it react.
Composable validators
required, email, minLength, pattern, and matchField. Each field validates on blur; submit validates them all. Errors resolve through the copy layer, so they localise via LanguageProvider.
Zod-compatible schema
The same hook driven by a structural safeParse schema — bring your own zod, the library never imports or bundles it. Schema messages are used verbatim.
const form = useForm({
initialValues: { email: "", password: "", confirmPassword: "" },
validators: {
email: [required(), email()],
password: [required(), minLength(12), pattern(/\d/)],
confirmPassword: [required(), matchField("password")],
},
onSubmit: async (values) => { await api.signUp(values); },
});
const emailField = form.fieldProps("email");
<Field {...emailField.field}>
<Field.Label>Email</Field.Label>
<Field.Input purpose="email" {...emailField.control} />
</Field>
<Button type="submit" disabled={!form.isValid || form.isSubmitting} loading={form.isSubmitting}>
Create account
</Button>Field compound
Label, Input, Helper, Error auto-wired via htmlFor + aria-describedby. Every state plus both orientations.
Must be at least 12 characters with one number.
Email must contain an @ symbol.
Markdown supported. Visible to subscribed customers.
<Field name="email" required>
<Field.Label>Email</Field.Label>
<Field.Input purpose="email" />
<Field.Helper>We'll never share your email.</Field.Helper>
</Field>Input
Single-line text input; purpose auto-configures native attributes. All sizes, states, and common purposes.
<Input purpose="email" placeholder="you@company.com" />Textarea
Multi-line text input. All sizes and states.
<Textarea placeholder="Release notes…" rows={4} />Select
Single-select dropdown with groups and separators. All sizes and states.
<Select defaultValue="pro"><Select.Item value="pro">Pro</Select.Item></Select>Combobox
Searchable autocomplete with grouped options. All sizes and states.
<Combobox items={items} defaultValue="id" clearable />Checkbox
Boolean or tri-state control. Every state, severity, and size.
<Checkbox checked="indeterminate" aria-label="Select all" />RadioGroup
Compound single-select. Arrow keys navigate. Both orientations plus a disabled option.
<RadioGroup defaultValue="pro"><RadioGroup.Item value="pro" id="pro" /></RadioGroup>Switch
Boolean on/off toggle. Every state, severity, and size.
<Switch defaultChecked severity="success" aria-label="Published" />Slider
Numeric range input. Single or range mode. Every severity, state, and both orientations.
<Slider mode="range" defaultValue={[20, 80]} showValue />NumberInput
Numeric input with step buttons and keyboard support. All sizes and states.
<NumberInput defaultValue={4} min={0} max={99} />CurrencyInput
Currency symbol, locale formatting, and precision clamping. All sizes, currencies, and states.
<CurrencyInput defaultValue={149.99} currency="USD" />PhoneInput
International phone input with country selector. All sizes and states.
<PhoneInput defaultValue="+62812345678" />TagInput
Type then Enter to add tags. Backspace removes the last. All sizes and states.
<TagInput defaultValue={["design", "product"]} />OTPInput
Segmented one-time-code input. Paste-safe. All lengths, sizes, and states.
<OTPInput length={6} />DatePicker
Single-date picker with popover calendar. All sizes and states.
<DatePicker clearable />DateRange
Two-date picker with range preview. All sizes and states.
<DateRange clearable />TimePicker
Hour/minute time input. All sizes and states.
<TimePicker defaultValue="09:30" />FileUpload
Drag & drop or click-to-select. Single, multiple, invalid, and disabled states.
<FileUpload accept="image/*" multiple />ColorPicker
Hex color picker with swatches. All sizes and states.
<ColorPicker defaultValue="#483aa0" />SignInForm
Full sign-in flow.
<SignInForm onSubmit={async (v) => {}} />SignUpForm
Sign-up with password strength and terms checkbox.
<SignUpForm onSubmit={async (v) => {}} />AddressForm
International address.
<AddressForm onSubmit={async (v) => {}} />PaymentForm
Card number, expiry, CVC.
<PaymentForm onSubmit={async (v) => {}} />