Skip to main content

Dropdown

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