DocsComponents
Text field
Label above, hint and error below, linked for screen readers.
Email address Enter a valid email address
- 1Label: Inter 16 px / 500, always visible above the field
- 2Pill: min. height 44 px, 2 px border, input background token
- 3Value 14 px; placeholder in the muted token, as a format example
- 4Message line under the field: error (destructive) or hint
Variants
One field, three slots around it. In the product, forms sit on white cards, so the examples do too.
The organiser texts you only about this booking.
States
Focus is forced below so it shows without a keyboard; the fields above react to real focus. The field has no hover state: it is a target for typing, not a button.
Enter a valid email address
API reference
Props of TextField. The password field and the OTP input are built on top of it.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | – | Required. Links the label to the input and builds the error id. |
label | string | – | Required. Visible label above the field (16 px, 500). |
error | string | null | – | Message under the field; sets aria-invalid and is announced (role alert). |
invalid | boolean | – | Marks the field wrong without its own message, e.g. when rules in the hint explain it. |
hint + hintId | node + string | – | Content under the field (e.g. password rules), linked via aria-describedby. |
labelAside | node | – | Right side of the label row, e.g. password strength bars. |
trailing | node | – | Slot at the end of the pill, e.g. the show-password toggle. |
…input attributes | type, value, placeholder, disabled… | – | Any native input attribute passes through. |
Accessibility
- The label is required by the API and linked to the input (for / id); a placeholder never replaces it.
- An error sets aria-invalid, is linked by aria-describedby and announced as an alert; the hint joins the same description.
- Focus: border in the ring token plus a 3 px ring at 50 %. Error: destructive border and text, never colour alone (the message says what to fix).
- Contrast: value 19.3:1, placeholder 7.2:1 on the input background; error text 4.8:1 on a white card.
- Honest note: the error text drops to 4.4:1 directly on the lilac page background, and the resting border (slate-200) is 1.2:1 against a white card, below the 3:1 of WCAG 1.4.11. Recommendation: keep forms on cards, and give the resting border the border-strong token (slate-500, 4.8:1) so the field reads before it is focused.
- The show-password toggle is a 44 px button with its own label and aria-pressed.
Do and don’t
Email address