Carbon Design System

Select allows users to choose one option from a list of values.

Overview
Live demo
Variants
Formatting
Content
Behaviors
Feedback

Overview

The select component collects user-provided information from a list of options. Selects are usually used in forms where a user submits data and chooses one option from a list.

When to use

Use the select component inside a form where users are selecting from a list of options and submitting data.
When the experience is mostly form-based.

When not to use

It is best practice not to use a select if there are fewer than three options for selection. In this case, use a radio button group instead.

Select versus Dropdown

While the select and dropdown components look similar, they have different functions.

A select presents a list of options from which the users can select only one item from that list. It works best in forms when users choose an option from the select list and submit data.
A dropdown presents a list of options that users can select one or several options from that list. Dropdown options are used for taking an action, filtering, or sorting existing content.

Another important difference between the two components is the underlying code. The select component’s appearance will be determined by the browser being used, while the dropdown component can be styled as needed.

Example of a dropdown list of actional options versus a select list of options for data submission.

Live demo

Theme selector

CodeSandbox React Angular Vue Web Components

Live editor for the Select component


<Select
  defaultValue="placeholder-item"
  helperText="Optional helper text"
  id="select-1"
  invalidText="A valid value is required"
  labelText="Select"
>
  <SelectItem
    text="Choose an option"
    value="placeholder-item"
  />
  <SelectItemGroup
    label="Category 1"
  >
    <SelectItem
      text="Option 1"
      value="option-1"
    />
    <SelectItem
      text="Option 2"
      value="option-2"
    />
  </SelectItemGroup>
  <SelectItemGroup
    label="Category 2"
  >
    <SelectItem
      text="Option 3"
      value="option-3"
    />
    <SelectItem
      text="Option 4"
      value="option-4"
    />
  </SelectItemGroup>
</Select>