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