Select

Select

A composable select/dropdown with search, multi-select, and keyboard navigation.

Usage

typescript
1import { Select } from '@flint-ui/core'
2

3<Select label="Country" placeholder="Choose a country">
4  <Select.Option value="us">United States</Select.Option>
5  <Select.Option value="kr">South Korea</Select.Option>
6  <Select.Option value="jp">Japan</Select.Option>
7</Select>

Basic select with static options

Variants

typescript
1// Searchable select
2<Select label="Country" searchable placeholder="Type to search...">
3  <Select.Option value="us">United States</Select.Option>
4  <Select.Option value="kr">South Korea</Select.Option>
5  <Select.Option value="jp">Japan</Select.Option>
6</Select>
7

8// Multi-select
9<Select label="Tags" multiple maxSelections={5}>
10  <Select.Option value="react">React</Select.Option>
11  <Select.Option value="vue">Vue</Select.Option>
12  <Select.Option value="svelte">Svelte</Select.Option>
13</Select>
14

15// Grouped options
16<Select label="Location" groupBy="region">
17  <Select.Group label="Americas">
18    <Select.Option value="us">United States</Select.Option>
19    <Select.Option value="br">Brazil</Select.Option>
20  </Select.Group>
21  <Select.Group label="Asia">
22    <Select.Option value="kr">South Korea</Select.Option>
23    <Select.Option value="jp">Japan</Select.Option>
24  </Select.Group>
25</Select>
26

27// Creatable — allows adding new options
28<Select label="Category" creatable placeholder="Select or create...">
29  <Select.Option value="design">Design</Select.Option>
30  <Select.Option value="eng">Engineering</Select.Option>
31</Select>

Searchable, multi-select, grouped, and creatable variants

Props

PropTypeDefaultDescription
labelstring—Accessible label text
placeholderstring—Placeholder text
disabledbooleanfalseDisables interaction
requiredbooleanfalseMarks as required
searchablebooleanfalseEnables type-to-search
multiplebooleanfalseAllows multiple selection
creatablebooleanfalseAllows creating new options
onSearch(query) => void—Custom search handler
maxSelectionsnumber—Limit for multi-select
groupBystring—Groups options by key

Keyboard Navigation

Select implements the full WAI-ARIA listbox pattern. Arrow keys move focus between options, Enter or Space selects the focused option, Escape closes the dropdown, and Home/End jump to the first or last option. Type-ahead is supported — pressing a letter key jumps to the first matching option.

<callout>Full WAI-ARIA listbox pattern. Arrow keys navigate, Enter selects, Escape closes, Home/End jump to first/last.

Advanced Usage