Select

A select lets you choose options from an option menu. A single-select lets you choose one option while a multi-select lets you choose multiple options.

Also known as:
SelectSelect menuSelect dropdownDropdownSelect input

AnchorNeed to know

  • Use for 4+ options when you need to conserve space and provide a pre-selected good default. There are single- and multi-select variants.

Visuals

UI Kit

Examples

Options

  • Single-select or multi-select.
  • Default or secondary select.
  • Search:

To keep in mind

A single-select lets the user choose one option from 4 or more items. A multi-select lets the user choose multiple options from 4 or more items. For fewer items, consider using a different component.

Anatomy

  • Select label: the form field label that states what this field controls.
  • Select control: clicking this expands and collapses the dropdown container and shows the currently selected option/item.
    • Selected option/item: the currently selected option is always shown. In rare cases, no option may be selected and a prompt would be listed here.
  • Select dropdown container: contains the available options/items. It is always shown above other elements, including the edges of modals.

Number of options

  • If there are more than 5 options, consider showing options in alphabetical order or other predictable ordering for easy scanning.
  • If there are more than 10 options, provide another method of accessing the options such as an autocomplete search or using smart defaults by surfacing recommended options.

Styling

Use a secondary select for less prominence and where there’s limited space.

Search

There’s an option to turn on or off search in the input part. When the options are likely known and there are more than 10, enable search.

Good defaults

Use a pre-selected good default where possible. In some cases, it cuts down on user decisions and validations if there is “always” a value selected. Sometimes that means including an “All” option as the first available option.

Interaction

  • Selected options:
    • Single-select options appear highlighted and are always shown in the dropdown part (that is, they are not removed as they are selected).
    • The multi-select shows selected items as tags and removes selected items from the dropdown part so that you cannot accidentally select an item twice.
  • De-selecting:
    • Single-select: where necessary, the user can de-select the selected item by clicking or tapping on a clear icon. Once removed, show placeholder text, such as “Select or search…”. Alternatively, you might require that a value is always selected so de-selecting is achieved by choosing a different option.
    • Multi-select: the multi-select shows selected items as tags and removes selected items from the dropdown part so that you cannot accidentally select an item twice. The user can de-select selected items using by clicking or tapping the clear icon shown in the dismissible Tags.
  • Loading state:
    • We can lazy load items to be shown in the single-select on search
    • Shows loading spinner
  • Disabled state:
  • Keyboard accessibility is tricky in Selects and needs regular testing.

Copy guidelines

To be scannable and fully helpful, an individual select must have a visible label that describes what it is selecting.

In contrast, for a row of selects such as a filter bar, you may use a single, shared visible label for the group, such as “Filters”. You may then use visually hidden labels for each individual select to be read by screen readers and other assistive devices. In that case, use a good default for each field’s pre-selected option to illustrate its use.

For an individual select, here’s what you need to know:

Give it a clear, short label

Make sure your select has a short, descriptive label above it that describes what the user is changing by selecting an option. Keep in mind that your label shouldn’t contain instructions. Reserve those for the helper text.

Do:
  • Do
    Email address
  • Do
    Full name
Don't:
  • Don't
    Your email address
  • Don't
    Full name of employee

Use minimal punctuation

Don’t use trailing colons and avoid phrasing your labels as questions.

Do:
  • Do
    Viewed by
  • Do
    Start date
Don't:
  • Don't
    Viewed by:
  • Don't
    When did this person start?

For filters, be explicit

To avoid ambiguity, use “by” and “to” where appropriate:

Do:
  • Do
    Viewed by
  • Do
    Compared to
Don't:
  • Don't
    Viewed
  • Don't
    Comparison

When no option is selected

In rare cases, there may be no option selected, such as in a form where “good default” makes sense, so we prompt the user to select an option. The select control will tell the user what to do instead of showing a selected option using the verb “Select”:

Do:
  • Do
    Select time zone
  • Do
    Select start date
Don't:
  • Don't
    Select a time zone
  • Don't
    Choose start date

When to use and when not to use

When to use
  • Use a single-select when the user needs to choose one option from 4 or more items.
  • Use a multi-select when the user needs to choose multiple options from 4 or more items.
  • Consider a select for infrequently used settings.
  • Consider a select when there is a good default option and show that as pre-selected.
  • Consider a select when you need to conserve space.
When not to use

See also

Provide related but different items that may solve similar problems e.g. loading spinner vs progress bar vs loading skeletons

External links

Here are some examples of other existing design systems: