Skip to main contentCarbon Design System

Select

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

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.

Select component

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.

Dropdown versus Select

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

Live demo

<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>
Select
Modifiers
SelectItem
Modifiers
SelectItemGroup