Inputs & forms
In review
Controls that capture input. Where cards lift, fields sink.
Fields sink
Section titled “Fields sink”A field is the inverse of a card: a recessed well, darker surface + inner shadow, lit from above (see Elevation & depth). Never a lifted box; never a glow on focus.
Rules that don’t bend
Section titled “Rules that don’t bend”- Persistent labels, never placeholder-as-label. The placeholder is a hint, not the name of the field.
- Validation is never color alone: error = color + icon + text, so it survives color blindness and grayscale (see Design laws).
- Focus = cyan outline, not a glow or colored shadow. One brand anchor; the outline reads on every state.
- Full keyboard operability; targets meet per-platform minimums (web ≥24px, Android 48dp, macOS ~44pt).
Radius
Section titled “Radius”Controls use the 12px control radius. The one exception: the search / input pill, one of the only two places the full pill is allowed (the other is chips).
Components
Section titled “Components”| Component | Status |
|---|---|
| Text field | ⚠ in review |
| Text area | ⚠ in review |
| Search field | ▢ queued |
| Select / dropdown | ▢ queued |
| Combobox / autocomplete | ▢ queued |
| Multi-select | ▢ queued |
| Checkbox | ▢ queued |
| Radio group | ▢ queued |
| Switch / toggle | ▢ queued |
| Slider / range | ▢ queued |
| Stepper: step progress (not a numeric input) | ⚠ in review |
| Number input, the numeric +/− stepper field (a different control; no page yet) | ▢ queued |
| Date picker / calendar | ▢ queued |
| Time picker | ▢ queued |
| Date range picker | ⊘ merged into Date picker range mode |
| File upload / dropzone | ▢ queued |
| OTP / PIN input | ▢ queued |
| Field validation | ▢ queued |
| Form layout | ▢ queued |