Text field
A text field lets users enter or edit text.
When to use
- A single line of text, such as a name, an email address or a search term.
- Any value people type instead of choosing from a list.
When not to use
- Several lines of text. Use a text area.
- A choice from a known set. Use a select, radios or checkboxes.
- A date. Use a date time picker, which can check dates in ways a text field cannot.
Guidance
Do
Put the label above the field and any help text below it, so people read it before they start typing.
Don't
Do not use the placeholder as the label. It disappears as soon as people start typing, and Invalid does not say what to fix.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. 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.