Skip to main contentCarbon Design System

Select

Preview the select component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

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
Modifiers