A text field is an input that people can type into. It supports several formats, including numbers, and a range of options such as help text, prefixes, and validation.
Figma
The Figma reference for TextField will appear here once the design link is added.
Storybook
Interactive examples for TextField will render here once the Storybook link is wired in.
Best practices
- Be clearly labeled so it’s obvious what to enter into the field.
- Mark the field “(optional)” when the input isn’t required.
- Only ask for information that’s really needed.
- Validate input as soon as the person has finished interacting with the field — but not before.
- Set an appropriate autocomplete value and inputMode so browsers can autofill and show the right virtual keyboard.
Do’s and don’ts
Do
Give the field a short, descriptive label placed above it.
Don’t
Use placeholder text as the only label — it disappears once typing starts.