Text fields are used to allow user to input various forms of text, such as names, emails, addresses, passwords, telephone numbers, and more..
Text input types
Usage
<input type="email">
<input type="email">
Error states
If the input is not valid or is missing, a red error message will appear to inform the user. This message should be clear and concise, explaining the issue and how to resolve it.
Required/optional
To prevent confusion and reduce visual clutter, only show the fields that are required. You can let users know which fields are optional by adding a note at the top of the form that says ‘All fields are required unless marked optional’.
Optional fields should be labeled with the word ‘optional’ in parentheses, like this: ‘Label (optional).
Interactions
States
Behaviour
Style
Microcopy guidelines
Input labels
Keep labels to 5 words and under. Long labels cause visual noise especially if they repeat.
Give labels descriptive meanings.
Do: Material topics
Don't: Choose material topics
Helper text
Helper text explains the purpose and gives context for the input. It does not repeat placeholder text.
Do: Material topics are the top level
Don't: Select at least two material topics
Placeholders
Always use placeholders. Placeholder describe what to do. These can be more descriptive than labels.
Do: Select material topics
Don't: Please select between eight material topics
Validation
Validation text describes what went wrong. It should be useful and constructive. Be concise.
Do: You must enter a value. Please enter a number
Don't: There is no value
Learn more about microcopy
Read our articles on best practice for writing text for UI and learning more about our language.