Skip to content
Design System

Select

Show developer docs

A flexible select component supporting single/multi-select, search, async loading, and creatable options. Compatible with react-select, select2, and mat-select patterns.

Stacked layout

Section titled “Stacked layout”

Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts.

Help or instructional text goes here Selected value Option 2 Option 3

Horizontal layout

Section titled “Horizontal layout”

Side labels are most useful when vertical space is limited.

Help or instructional text goes here Selected value Option 2 Option 3

Appearance

Section titled “Appearance”
Label Option 2 Option 3

Single-select

Section titled “Single-select”
Option 1 Option 2 Option 3

Multiple

Section titled “Multiple”
Option 1 Option 2 Option 3

Input sizes

Section titled “Input sizes”
Selected value Option 2 Option 3 Selected value Option 2 Option 3

In practice

Section titled “In practice”

The select component should:

  • Be used for selecting between 4 or more pre-defined options.
  • Have a default option selected whenever possible.
  • Use “Select” as a placeholder option only if there’s no logical default option.

Content guidelines

Section titled “Content guidelines”

Select label

Section titled “Select label”

Labels should:

  • Give a short description (1–3 words) of the requested input.
  • Be written in sentence case (the first word capitalized, the rest lowercase).
  • Avoid punctuation and articles (“the”, “an”, “a”).
  • Be independent sentences. To support internationalization, they should not act as the first part of a sentence that is finished by the component’s options. (e.g., use “Country” NOT “My country is:”)
  • Be descriptive, not instructional. If the selection needs more explanation, use help text below the field.

Select placeholder

Section titled “Select placeholder”

The use of placeholder text should be avoided, unless there are technical reasons that require text to be shown. In cases where placeholder text must be used, it should:

  • Start with “Select” if there isn’t a default option, and no search field is shown.
  • Be written in sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons.
  • Be clearly worded in relation to the field label.

Additional placeholder guidelines by select type:

  • Single select field: Select [item type]
    • Example: Select a department
  • Multiple select field: Select [item types]
    • Example: Select reviewers
  • Single select with search field: Search for [item type]
    • Example: Search for a country
  • Single select with custom entry field: Select or enter a [item type]
    • Example: Select or enter a cost center

Select options

Section titled “Select options”

Options should:

  • Be listed alphabetically or in another logical order so customers can easily find the option they need
  • Be written in sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at the end of each option
  • Be clearly labelled based on what the option will do

Design resources

Section titled “Design resources”
View component in Figma