Forms & inputs
Text entry, selection controls, and a zod-validated form layer — all Base UI-backed, keyboard-operable, and focus-visible.
@shuttering/uiimport { Input, Textarea, Field, Select, Combobox, Checkbox, RadioGroup, Switch, Slider, Form, useForm } from '@shuttering/ui'
Text inputs
Input and Textarea are token-styled native controls; Field pairs a label with a control and an optional error.
| Prop | Type | Default | Description |
|---|---|---|---|
| Field · label | ReactNode | — | The control label, associated with the child input. |
| Field · error | ReactNode | — | An error message rendered below the control in the destructive tone. |
| Input / Textarea | React.ComponentProps<'input' | 'textarea'> | — | All native attributes — value, onChange, placeholder, disabled. |
Selection controls
Checkbox, Switch, RadioGroup, and Slider — each a controlled Base UI primitive.
Plan
Threshold — 40
| Prop | Type | Default | Description |
|---|---|---|---|
| Checkbox / Switch | checked, onCheckedChange | — | Controlled boolean state. Checkbox reports true | false | "indeterminate". |
| RadioGroup | value, onValueChange | — | A single selection; each option is a RadioGroupItem with a value. |
| Slider | value: number[], onValueChange, min, max, step | — | A value array (supports multiple thumbs). Arrow keys nudge by step. |
Select
A custom, keyboard-navigable listbox — designed top to bottom, not the native control.
| Prop | Type | Default | Description |
|---|---|---|---|
| Select | value, onValueChange | — | Controlled selection. Composes SelectTrigger / SelectValue / SelectContent / SelectItem. |
| SelectItem · value (required) | string | — | The value emitted when the item is chosen; its children are the label. |
Combobox
A searchable single-select — type to filter a long list, arrow-key through the matches, Enter to pick. The popup scales in from the input, and the built-in filter narrows the options as you type.
| Prop | Type | Default | Description |
|---|---|---|---|
| Combobox · items (required) | string[] | — | The full option list; the input filters it as the user types. |
| Combobox · value / onValueChange | string | null | — | Controlled selection — null when nothing is chosen. |
| ComboboxContent · children | (item, index) => ReactNode | — | Renders each already-filtered item, usually to a ComboboxItem. |
| ComboboxContent · emptyLabel | string | 'No results.' | Shown when the filter matches nothing. |
Form — zod-validated
useForm binds a zod schema to a form: register fields, surface per-field errors, and submit typed values.
| Prop | Type | Default | Description |
|---|---|---|---|
| useForm(schema, opts) | (ZodSchema, { onSubmit }) => UseFormReturn | — | Returns register, errors, and handleSubmit bound to the schema. |
| register(name) | (field) => FieldRegistration | — | Spread onto an Input/Textarea to wire value, onChange, and name. |
| errors | Partial<Record<field, string>> | — | Validation messages, keyed by field — pass to FormField’s error prop. |