Forms
TextField
A labelled input with help text and validation messages tied to the field.
Live example
Usage
<TextField
label="Destination"
required
validate={validators.compose(validators.required('Enter a destination'), validators.minLength(2))}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | none | Visible label. Placeholders are not labels. |
description? | ReactNode | none | Help text, linked with aria-describedby. |
validate? | (value: string) => string | undefined | none | Runs on blur, then on each change once an error is showing. |
error? | string | none | Error from the parent, such as after submit. Wins over validate. |
value? | string | none | Controlled value. |
defaultValue? | string | '' | Uncontrolled initial value. |
onChange? | (value: string) => void | none | Called with the new string value. |
prefix? | ReactNode | none | Decorative text before the input, such as a currency symbol. |
hideLabel? | boolean | false | Visually hide the label. Use only when context makes it obvious. |
Do and don't
Do
- Validate on blur, not on every keystroke of a fresh value.
- Write errors that say how to fix it: "Enter 0 or more".
- Mark required fields in the label text.
Don't
- Use placeholder text as the label.
- Clear the user's input when it is invalid.
- Show an error before the user has left the field.
Accessibility
- Label is a real label element. Help text and error are referenced by aria-describedby.
- aria-invalid is set only while an error shows. The error has an icon and text, never color alone.
- The error container exists before an error appears, so its id is stable for assistive tech.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves into and out of the field; leaving it runs validation |