Components
Forms
You come here to enter and validate data: a field, a choice, a date, a whole form.
- Owner rule
- Every field speaks the label, error and description contract of Field.
- Size budget
- 203.0 kB gzip for the whole domain; it only goes down.
Entries
15 entries, 13 used by live products and sites. Experimental entries come last: they may change or go in any minor version.
- FieldA form field: a label, a hint and an error around an
Input, aTextareaor a nativeSelect.42 files import it - CheckboxA box to check: checked, unchecked or indeterminate, with its words as one clickable label.7 files import it
- Choice gridA line-up of choices as tiles — a visual, a name, a line: a radio group with roving focus when selectable, a named showcase otherwise; sober by default, a select screen in the arcade flavour.1 files import it
- ComboboxA text field that suggests and completes — one value or several as chips, from a static list or a server, with values created from what was typed.1 files import it
- Date pickerDates and times chosen the way the task asks — a calendar, a period with presets, a strip of days, wheels, time slots, a month, a date of birth — as ISO values (
2026-10-11,2026-10,18:30) the form, the address and the API share, in the locale's own words.2 files import it - Filter barThe bar above a list: its saved views, the controls that narrow it, the filters in force as removable chips, “Clear filters”, and the count of results — the state kept by the app, in the address.6 files import it
- FormA form = a schema (zod 4) + the package's fields, on TanStack Form v1: each error shows once the field is left and goes as soon as it is fixed, in the person's language (i18n keys, never the engine's English), a value can be checked on the server as it is typed, and the server's refusals land under their fields — web and React Native, the same schema.51 files import it
- OTP inputA one-time code in boxes over one real input: the keyboard's suggestion of the code and pasting fill every box at once.
- Radio groupOne choice among a few options, all visible: dots with their words, whole cards, tactile keys that press in, or a segmented control.9 files import it
- Search fieldA search box: a clear button, a global ⌘K / Ctrl+K shortcut, a debounced
onSearch, Enter to submit, and suggestions with the keyboard.9 files import it - SliderA value or a range chosen by dragging a thumb along a track — steps you can see, the value floating over the thumb, the brand’s gradient, horizontal or vertical — with arrows and Page keys.5 files import it
- SwitchAn on/off setting that applies at once.19 files import it
- Tag inputFree words as removable chips — Enter or a comma adds one, a paste adds several, suggestions complete,
normalizecleans andvalidaterefuses with a reason.1 files import it - Tag selectorInterests, languages, a workspace's tags: toggle chips with a limit and a count — the others rest once the limit is reached. With a
markeran option is a tag with its colour;creatableadds a field where Enter takes the tag typed or creates it.4 files import it - Schema formA form drawn from a JSON Schema: typed fields, the schema's own rules, the words of the language (
x-i18n) and the rarely needed fields folded (x-advanced).