forms contract
Input
Single-line text entry control. The default form primitive; ~80% of form fields are this.
Variants
- default
- Standard outlined field
- filled
- fill.tertiary background, no border — for compact forms
- inline
- Underline-only, used in detail rows where forms feel heavy
Sizes
- sm
- 28pt height, footnote 13/18
- md
- 36pt height, callout 16/21 (default)
- lg
- 44pt height, body 17/22 — touch surfaces
Slots
- leading
- Optional icon (search, lock)
- trailing
- Optional icon or button (clear, reveal-password)
Example
<Input id="email" name="email" type="email" autoComplete="email" aria-describedby="email-error" aria-invalid={!!err} />Usage rule
Always wrap in a Label component or pair with `<Label htmlFor>` — placeholders are never the only label.
The full Input contract has 7 more rules and 1 more example, plus the do-not patterns. Get the full recipe.