Select
Dropdown selection from a list of options. Supports grouped options, search, and full keyboard navigation with RTL support.
Preview
Installation
Terminalbash
Usage
Reacttsx
Examples
With Label
tsx
Grouped Options
tsx
Disabled State
tsx
Controlled Component
Selected: None
tsx
In Forms
tsx
Props
Select
| Name | Type | Default | Description |
|---|---|---|---|
value | string | undefined | The controlled value of the select |
defaultValue | string | undefined | The default selected value (uncontrolled) |
onValueChange | (value: string) => void | undefined | Event handler called when the value changes |
disabled | boolean | false | Disables the select |
name | string | undefined | The name for form submission |
required | boolean | false | Marks the select as required |
SelectItem
| Name | Type | Default | Description |
|---|---|---|---|
valueRequired | string | undefined | The value of the select item |
disabled | boolean | false | Disables this specific item |
Accessibility
Keyboard Navigation
- Tab: Move focus to/from select
- Enter or Space: Open dropdown
- Arrow Keys: Navigate options
- Enter: Select option
- Esc: Close dropdown
- Type: Jump to option starting with typed character
Always Use Labels
Always pair selects with labels for screen reader users. Clicking the label focuses the select trigger.
Screen Readers
Screen readers announce the combobox role, the label, the selected value, and instructions for opening the dropdown.
Grouped Options
Use SelectGroup and SelectLabel to organize options into categories. Group labels are announced by screen readers.
RTL Considerations
Select dropdowns automatically support RTL layout. The dropdown position, chevron icon, and check indicator all adapt correctly for right-to-left languages.