Default single select
The select component, is a widget which displays a list of selectable items from which the user can select one values.
Do's
- write short, distinct and indicative headings for the items listed inside the dropdown
- use dropdown select menu labels as click targets (clicking the label will trigger the action)
- indicate whether the input is optional
- make use of helper text if there are further directions or hints the users may need in completing their goal (example: you must be a current resident of this country)
- write specific and clear error message texts, so users understand how to address the error
Don'ts
- don't use as navigation
- don't use it for multi-select
When to use
- when there are more than 5 options to select from
When not to use
- when you want users to read all options
Multi-select
The multi-select is a variation of the single-select component, and it displays a list of selectable items from which the user can select one or more values.
Do's
- write short, distinct and indicative headings for the items listed inside the dropdown
- use dropdown select menu labels as click targets (clicking the label will trigger the action)
- indicate whether the input is optional
- make use of helper text if there are further directions or hints the users may need in completing their goal (example: you must be a current resident of this country)
- write specific and clear error message texts
Don'ts
- don't use as navigation
- don't use it for multiple select
When to use
- when there are more than 5 options to select from
When not to use
- when you want users to read all options