Text field
A text field is an input that allows a user to write or edit text.
When to use
- A single line of text, such as a name, an email address or a search term.
- Any value a reader types rather than chooses.
When not to use
- Several lines of text. That is a text area.
- A choice from a known set. That is a select, radios or checkboxes.
- A date. That is a date time picker, which can validate what a text field cannot.
Guidance
Do
Label the field above it and put any explanation below, where it is read before the reader starts typing.
Don't
Do not use the placeholder as the label. It disappears as soon as the reader types, and Invalid does not say what to fix.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| textfield | surface | 0.000Substrate | 0.000Substrate |
| textfield--disabled | disabled | 0.042Ambient | 0.129Ambient |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- Label with the value wanted. Work email, not Enter your email.
- Sentence case, and no colon.
- Helper text says what the value is for, or the format if it is not obvious.
- An error says what is wrong and how to fix it. Enter an email address including an at sign, not Invalid.