03 / Components

Select

Choose one option from a list. Use over a native dropdown when custom styling, search, or grouping is needed.

Demo

Preview

Selected: md

Reference

States

Select has three rendered states: default (interactive), open (popover visible), and disabled (non-interactive, legible). The open state appears when a user clicks the trigger; the disabled state is shown below alongside the default for comparison.

default

disabled

Guidelines

Usage

Use Select when there are five or more options to choose from.

Don’t

Use Select for binary choices — use Switch or Toggle instead.

Provide an accessible name via aria-label or a visible label tied to the trigger.

Don’t

Default to no selection unless the absence is meaningful — show a placeholder.

Order options by relevance or frequency, not alphabetically by default.

Don’t

Hide the most-used option deep in a long list when frequency is known.

Implementation

Code

1const [value, setValue] = useState('md')
2
3<Select.Root value={value} onValueChange={setValue}>
4  <Select.Trigger className="lex-select__trigger">
5    <Select.Value />
6    <Select.Icon><Caret /></Select.Icon>
7  </Select.Trigger>
8  <Select.Portal>
9    <Select.Content className="lex-select__content">
10      <Select.Viewport className="lex-select__viewport">
11        <Select.Item value="sm" className="lex-select__item">
12          <Select.ItemText>Small</Select.ItemText>
13        </Select.Item>
14        <Select.Item value="md" className="lex-select__item">
15          <Select.ItemText>Medium</Select.ItemText>
16        </Select.Item>
17        <Select.Item value="lg" className="lex-select__item">
18          <Select.ItemText>Large</Select.ItemText>
19        </Select.Item>
20      </Select.Viewport>
21    </Select.Content>
22  </Select.Portal>
23</Select.Root>

Reference

Design tokens

Token	Usage
`--color-surface`	Trigger background and content panel
`--color-border`	Trigger and content border
`--color-border-strong`	Trigger border on hover
`--color-text`	Trigger value text
`--color-text-2`	Item label text
`--color-text-muted`	Caret icon colour
`--color-surface-2`	Highlighted item background
`--color-accent`	Selected item label
`--shadow-md`	Content popover elevation
`--lex-radius-md`	Trigger and content corner radius
`--lex-radius-sm`	Item corner radius

A11y

Accessibility

Select implements the WAI-ARIA combobox / listbox pattern via Radix. The trigger is a real <button>; the popover uses role="listbox" internally. Type-ahead matches the first character of an item label.

`Space`/`Enter`/`↓`	Open the popover
`Esc`	Close the popover and return focus to the trigger
`↑`/`↓`	Move highlight between items
`Enter`	Select the highlighted item and close
`Home`/`End`	Move highlight to first / last item
`Type-ahead`	Move highlight to the first item starting with the typed character