Theme
Text field
A single line of text input.
Examples
A short noun phrase.
Enter an email address.
Props
TextField
A single line of text input with its label, description and validation.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | The visible label. Every field has one; it names the field for screen readers too. Text, so it can also be the field's aria-label: see `useFallbackName`. |
description? | ReactNode | — | Help shown under the field and read with it. |
errorMessage? | ReactNode | ((validation: ValidationResult) => ReactNode) | — | Shown when the field is invalid; defaults to the browser's validation message. |
placeholder? | string | — |
Also takes 118 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves into and out of the field |
Accessibility
- The label is required and is the field's accessible name; the description and error are linked with aria-describedby.
- Invalid fields are marked aria-invalid, and the error is announced when it appears.
- The border meets 3:1 against every surface (borderControl), and text 4.5:1, in every theme.