This component enables users to pick an option from a list of five or more choices, and typically requires a final submit action to confirm the selection.
Select types
Usage
List dropdowns
Usage
Advanced dropdowns
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.