Forms

Select

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