Menu

Color
Typography
Spacing
Radius
Border
Opacity
Elevation
Blur
Avatar
Badge
Button
Checkbox
Input
ProgressBar
RadioButton
Separator
Slider
Switch
TextArea
TextLink
Accordion
Breadcrumb
ButtonGroup
Combobox
DropdownMenu
ListItem
Pagination
SegmentedControl
Select
Tooltip
Calendar
Card
CommandMenu
DatePicker
Dialog
Drawer
EmptyState
Footer
Form
NavigationBar
Sidebar
Skeleton
Table
Tabs
Toaster

Select

Picks one option from a list that opens under the field. Label, optional helper text, and an error state.

Label
Helper text
Size
Menu

Usage

Import the component and render it.

import { Select } from 'src/components/Select/Select';

<Select
  size="sm"
  label="Label"
  placeholder="Select option"
  helperText="Helper text"
  options={[{"value":"one","label":"Option","description":"Description"},{"value":"two","label":"Option 2","description":"Description"},{"value":"three","label":"Option 3","description":"Description"},{"value":"four","label":"Option 4","description":"Description"}]}
/>

Accessibility

Role: select-only combobox: a role="combobox" field (aria-haspopup="listbox") controlling a role="listbox" of options.

KeyAction
Enter / Space / ↓ / ↑On the closed field: opens the list on the chosen option (or the first)
↓ / ↑Highlights the next / previous option (disabled ones are skipped; focus stays on the field)
Home / EndHighlights the first / last option
Enter / SpaceChooses the highlighted option and closes the list
EscapeCloses the list without changing the value
TabCloses the list and moves on
  • The label names the field and the helper text describes it; with error, aria-invalid is set and the helper text is the error message.
  • A click outside closes the list.

Size

Set the size prop: Small is "sm", Medium is "md".

Label
Helper text
Small
Label
Helper text
Medium
<Select
  size="sm"
  options={[{"value":"one","label":"Option","description":"Description"},{"value":"two","label":"Option 2","description":"Description"},{"value":"three","label":"Option 3","description":"Description"},{"value":"four","label":"Option 4","description":"Description"}]}
/>
<Select
  size="md"
  options={[{"value":"one","label":"Option","description":"Description"},{"value":"two","label":"Option 2","description":"Description"},{"value":"three","label":"Option 3","description":"Description"},{"value":"four","label":"Option 4","description":"Description"}]}
/>

States

Disabled comes from the disabled prop; Error from the error prop; Filled from the content (value). Hover and Focus follow the pointer and the keyboard: try them in the playground.

Label
Helper text
Default
Label
Helper text
Disabled
Label
Helper text
Error
Label
Helper text
Filled
<Select
  options={[{"value":"one","label":"Option","description":"Description"},{"value":"two","label":"Option 2","description":"Description"},{"value":"three","label":"Option 3","description":"Description"},{"value":"four","label":"Option 4","description":"Description"}]}
  disabled
/>
<Select
  options={[{"value":"one","label":"Option","description":"Description"},{"value":"two","label":"Option 2","description":"Description"},{"value":"three","label":"Option 3","description":"Description"},{"value":"four","label":"Option 4","description":"Description"}]}
  error
/>
<Select
  options={[{"value":"one","label":"Option","description":"Description"},{"value":"two","label":"Option 2","description":"Description"},{"value":"three","label":"Option 3","description":"Description"},{"value":"four","label":"Option 4","description":"Description"}]}
  value="one"
/>

Composition

Use the following composition to build a Select:

Select
└── SelectItem

SelectItem

One option of a Select: a label, an optional description, and a check when it is the selected one. Only used inside Select.

OptionDescription
SelectItem
<SelectItem label="Option" />

Used in

Select is part of Form.

Actions

Pass callbacks to respond to the component.

import { Select } from 'src/components/Select/Select';

<Select
  size="sm"
  label="Label"
  placeholder="Select option"
  helperText="Helper text"
  options={[{"value":"one","label":"Option","description":"Description"},{"value":"two","label":"Option 2","description":"Description"},{"value":"three","label":"Option 3","description":"Description"},{"value":"four","label":"Option 4","description":"Description"}]}
  onValueChange={(value) => console.log(value)}
  onOpenChange={(open) => console.log(open)}
/>
CallbackWhen
onValueChangeCalled with the chosen option value.
onOpenChangeCalled when the list opens or closes.