Select

When to use

When there are multiple predefined options, and the user needs to select one or more.
When space is limited and you don’t want to display all the options at once.
When the options are familiar to the user and do not require additional explanation.
For form inputs that require a specific selection.

When to use something else

More than ~12 options or search helps: use Combobox.
Very few options or binary on/off: use Checkbox, Radio, or Switch.
User-defined or creatable values: use Combobox.
Options need long descriptions visible at once: use Checkbox or Radio.
Selection immediately runs an action (not form field value): use Button, Toggle group, or Toolbar.
Page-level view switching: use Segmented control or Tabs.

Dos and don’ts

Do provide a clear label and placeholder copy. Use help text if clarification is needed.
Do be careful with using default selections as users may not thoroughly check the default.
Do group related options in the list if there are multiple categories. List in order of frequency or alphabetically - whichever is better suited for the task.

Select menus display a checkmark, or toggle, to the right of the menu item, instead of on the left like traditional Context and Dropdown menus. This is because scanning the list is easier when the checkmark is on the right. Therefore it is recommended to avoid leading content like an icon or Badge on the left side of the menu item. Badges should be placed on the right side of the menu item.

Behavior

Single-select: choosing an item commits the value and closes the list (unless design specifies otherwise).
Multi-select: list may stay open until dismissed; confirm patterns (Apply) belong in Select panel-style flows.

Often used with

Label, Helper text; Badge on items when needed; trigger is often a Button-styled field.

Build

Documentation Index

​Select

​When to use

​When to use something else

​Dos and don’ts

​Select menu

​Behavior

​Often used with