Forms

Select

The dropdown/select, also known as a select menu, is a widget which displays a list of selectable items from which the user can select one value.

Anatomy

Anatomy of select
  • Mandatory
  • Optional

Default

ElementsMandatoryDescription
HeadingYesHeading describes the options in the Select Menu
Helper textNoHelper text information assists a user in using Select Menu
Dropdown ListYesDropdown in the collapsed state with placeholder giving instructions for using the Dropdown Select
Action indicatorYesDisplays listed items on click

Conditional (missing input)

ElementsMandatoryDescription
Optional indicatorYesIndicator stating if input fields are optional
Error messageYesA message informing the user if there is a problem with their entry

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 multiple select

When to use

  • when there are more than 10 options to select from

When not to use

  • when you want users to read all options