Select

Preview

When to use

Use a select when the user needs to choose one or more options from a predefined list, and showing all options inline would take too much space. Good for:

• Choosing a country, city, or region.
• Selecting a category or filter from a long list.
• Picking a time zone, language, or other system option.

When not to use

• Don't use a select for fewer than 3–4 options — use Radio buttons so all options are visible without interaction.
• Avoid select for binary choices — use a Switch or Checkbox.
• Don't use a single-select when users typically need to pick several items — use the multi-select variant or Checkbox.

Behaviour

Single select — clicking the field opens a dropdown (a Listbox) with the available options. Selecting an option closes the dropdown and sets the field value. Only one option can be selected at a time.

Multi-select — clicking the field opens the dropdown. The user can select multiple options; selected options are shown as tags inside the field. Clicking a selected option or its remove button deselects it.

Both variants close the dropdown when the user clicks outside it or presses Escape.

Anatomy

• Label — a visible field label above the select. Required.
• Helper text (optional) — secondary guidance below the label.
• Trigger — the field itself. Shows the selected value (or placeholder text when empty) and a chevron icon indicating it can be opened.
• Dropdown / Listbox — the list of options that appears when the trigger is activated. See Listbox for how the option list is structured.
• Selected value indicator — in multi-select, selected options appear as dismissible tags inside the field.
• Error message — replaces or supplements helper text when validation fails.

Variants

• Single (Default size) — single-select, standard height trigger field.
• Single (Large size) — single-select, taller trigger field. Use when the form needs more visual weight or touch target.
• Multi (Default size) — multi-select, standard trigger. Selected values stack as tags inside the field.
• Multi (Large size) — multi-select, larger trigger.

States

• Default (empty) — no value selected; placeholder text is shown.
• Filled — one or more values are selected.
• Hover — the field border highlights when the cursor is over it.
• Focus — a visible focus ring appears when the field is active.
• Open — the dropdown is visible and the user is browsing options.
• Error — validation has failed; the field uses error styling and an error message is shown.
• Read only — the selected value is visible but the field cannot be changed.
• Disabled — the field is non-interactive and visually reduced.

Placement & layout

The select field spans the full width of its grid column. The dropdown overlays content below the trigger and is wide enough to accommodate the longest option.

In forms, place select fields in the same vertical flow as other inputs. Keep consistent label and helper text alignment across fields.

Accessibility

• The trigger must be a focusable element with role="combobox".
• The associated <label> must be linked to the trigger.
• Keyboard navigation:
  • Tab to focus the trigger.
  • Enter or Space to open/close the dropdown.
  • Arrow Up / Arrow Down to move through options.
  • Enter to select the focused option.
  • Escape to close the dropdown without selecting.
• The dropdown list should use role="listbox" with each option as role="option".
• In multi-select, each selected tag's remove button must have an accessible label (e.g., "Remove: Sweden").

Related components

• Listbox — the dropdown list component used inside a select.
• Radio — for small sets of options (2–6) where all options should be visible at once.
• Checkbox — for multi-select in a form where options benefit from a visible list.