Form controls
Apple HIG selection and input patterns, rendered in Epicenter tokens — 12px field radius, brand colors, allowed form borders, no decorative shadows.
Overview
Styles live in components/form.css. Follow brand kit chrome
(--input-radius: 12px on fields; --radius: 40px on cards/surfaces,
brand blues/coral, form borders allowed). Pair every control with a
visible .field__label — placeholders disappear while typing.
- Text field — small, specific values. Text view — longer freeform text.
- Switch — binary on/off in a list row.
- Checkbox — independent options; people can pick any combination.
- Radio — 2–5 mutually exclusive choices with distinct labels.
- Segmented control — 2–5 related modes of equal weight.
- Picker (select) — longer lists where radios would overwhelm the layout.
Text fields
12px corner radius (--input-radius), surface fill, 1px form border, 44px minimum
height. Persistent label above; placeholder is only a secondary hint.
Default
With hint
As it should appear on reports.
Disabled
Text views
Use a text view when people need to enter more than a short phrase.
Pickers
Prefer a picker when a mutually exclusive list grows past about five options.
Toggles
Switches live in inset list rows. On uses brand medium blue; state also reads from thumb position. Checkboxes use brand blue fill plus a checkmark.
Switch
Checkboxes
Radios
Short mutually exclusive sets. Selected state uses a filled circle with an inner disc — not color alone.
Segmented control
Same pill track as feature tabs — white shell, gradient active segment. Keep to 2–5 equal-weight modes.
Validation
Validate when it helps — often on blur for format checks. Use aria-invalid
with .field__error and brand coral.
Enter a valid email address.
Email capture
Same pill shell as feature tabs — white track with a primary gradient CTA nested inside.