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.
- Autocomplete (not built)
- Button Group (not built)
- Checkbox Group
- Date Picker (not built)
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon Button
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Pagination (not built)
- Progress Bar (not built)
- Progress Stepper
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Slider (not built)
- Split Button
- Tile Grid
- Toast Notification
- Use for 4+ options when you need to conserve space and provide a pre-selected good default. There are single- and multi-select variants.
- Single-select or multi-select.
- Default or secondary select.
- With search. See also: Search Field.
- Without search.
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.
- 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.
- 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.
Use a secondary select for less prominence and where there’s limited space.
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.
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.
- 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.
- 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.
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:
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.
- Email address
- Full name
- Your email address
- Full name of employee
Don’t use trailing colons and avoid phrasing your labels as questions.
- Viewed by
- Start date
- Viewed by:
- When did this person start?
To avoid ambiguity, use “by” and “to” where appropriate:
- Viewed by
- Compared to
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”:
- Select time zone
- Select start date
- Select a time zone
- Choose start date
- 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.
Provide related but different items that may solve similar problems e.g. loading spinner vs progress bar vs loading skeletons
Here are some examples of other existing design systems: