Text field
Visible label. Type 16. Face 32. Hit 44.
Spec
- Visible label.
aria-labelonly when hidden on purpose. - Error: icon +
aria-invalid+aria-describedby. - Disabled:
fg-disabled. - Placeholder is an example, never the label. Query:
status:5xx region:eu-west. - Helper below.
- Leading icon, prefix, or suffix allowed.
- Visual sm 28 / md 32 / lg 36. Desktop face is the control token. Compact-width companion uses the 44 face. Type always 16.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Visible label. Placeholder is an example. Type 16, hit 44.
Filter syntax. Enter runs the query.
Prefix + suffix, sm / lg
p95s
Error + disabled
Token is expired. Rotate it.
Do / Don't
| Do | Don't |
|---|---|
| Label above, helper below. | Placeholder as the only label. |
| Type 16. | 14px inputs that zoom on iOS. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
transform: scale(0.97) | 120ms --dur-fast | --ease-out | :active | instant |
| color / border | 120ms --dur-fast | --ease-out | :hover | instant |
| outline | 80ms --dur-micro | --ease-out | :focus-visible | instant |
Accessibility
- Contrast:
--fgon--bg-surface. Placeholder is--fg-mutedand not the name. - Error message is in the describedby chain. Icon is
aria-hidden. - Hit 44. Keyboard is native.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.