operators can finally enter text · 14 primitives · one grammar
the form-input pack closes the largest gap in the 1.0.0 system. 14 primitives — Field, Form, Input, Textarea, Select, Checkbox, RadioGroup, Switch, Slider, DatePicker, TimePicker, FileUpload, ColorPicker, TagInput — share one seven-state grammar (idle · hover · focus · invalid · disabled · readonly · refuse), so consumers learn it once and apply it everywhere. paper-trade entry, refusal reasons, attestation upload, skin tuning — all composed from this pack.
playground · live
pick a state · the entire pack snaps to that grammar · the receipt below echoes the bound values. seven states uniform across every primitive — idle · hover · focus · invalid · disabled · readonly · refuse.
symbol · mono variant
numeric · tabular · right-aligned
paper-first · live needs tier ≥ 3
single-of-N · roving tabindex
binary on/off · amber on
single boolean · indeterminate supported
- state
- focus
- ticker
- sol
- size
- 2500 usd
- venue
- paper
- side
- long
- auto
- off
- terms
- acknowledged
- note
- caret live · amber ring
04 worked example · paper-trade entry
every field below uses Field for label + hint + error rhythm. nothing is bespoke; the form is composed entirely from@zero/ui.
06 dossier · 14 primitives
| num | primitive | why it ships |
|---|---|---|
46 | Field | the canonical label + control + hint + error wrapper |
47 | Form | validation host with refuse-callout error summary |
48 | Input | single-line text · default · mono · numeric · refuse |
49 | Textarea | multi-line text · auto-grow · counter slot |
50 | Select | single-value choose-one (combobox in v1.1) |
51 | Checkbox | single boolean · indeterminate (mixed) shipped |
52 | RadioGroup | single-of-N · roving tabindex · group primitive only |
53 | Switch | binary on/off · amber on · never green |
54 | Slider | single value or paired range · pulse-bound on drag |
55 | DatePicker | custom calendar · today is amber dot, never cell fill |
56 | TimePicker | mono twin columns · 24h default · 12h opt-in |
57 | FileUpload | drop zone · explicit caption · per-file refuse handles |
58 | ColorPicker | OKLCH-aware · L/C/H sliders · hex is read-only readout |
59 | TagInput | multi-value · enter to commit · backspace removes last |
07 the seven-state grammar
| state | meaning | visual |
|---|---|---|
idle | no interaction yet | --field-border · 1px |
hover | pointer over interactive surface | --field-border-strong · 1px |
focus | receives keyboard focus | --border-focus · 1px + 1px ring |
invalid | failed validation, hint visible | --danger · 1px + inline FieldError |
disabled | not interactive (system-set) | --field-bg-disabled · --fg-subtle |
readonly | value visible but not editable | --field-bg-readonly · dashed border |
refuse | operator-side refusal (ZERO posture) | RefusePill chrome at field foot |