Select

v1.0.0 | View in Storybook

​

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 menu

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; use an explicit confirm pattern (for example, Apply) when users must review selections before committing.

​

Often used with

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

​

Visual examples

The examples below are interactive and follow the doc site’s theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

​

With label

Pair a Select with a visible label in forms so users know what they are choosing, and use helper text when the options need additional context.

​

With icons

Add icons to menu items when they help users distinguish options quickly—for example, file types, status indicators, or category markers.

​

With suffix

Use a suffix on the trigger when the selected value needs a unit, status, or secondary detail visible without opening the menu.

​

Disabled

Use a disabled Select when the field cannot be changed, and explain why in helper text or a tooltip so users know what must happen before they can choose an option.

​

With error

Show an error state when the current selection fails validation—for example, a required field left empty or a value that conflicts with another form input.

​

With groups

Group related options when the list spans multiple categories—for example, separating regions, departments, or asset types to make scanning easier.

​

With default value

Pre-select a default when one option is the most common or recommended choice, but be mindful that users may not review the selection before submitting.

​

Narrow trigger with long options

Use a narrow trigger when space is limited, and let the menu expand to show full option labels so long text is not truncated in the dropdown.