Select

Custom dropdown select with animated transitions, grouped items, and full keyboard navigation.

On This Page

Custom dropdown select with animated transitions, grouped items, and full keyboard navigation.

Custom dropdown select with animated transitions, grouped items, and full keyboard navigation.

selectPicking one option from a list of 4+ options where space on the page is constrained.

radio groupWhen there are 2–4 options and all alternatives should be visible at a glance.

combobox / commandLarge lists with 15+ items where searchable filtering is critical.

component.tsx

component.tsx

component.tsx

Prop	Type	Default	Description
defaultValue	string	`—`	The value of the select when initially rendered in uncontrolled mode.
value	string	`—`	The controlled value of the select.
onValueChange	(value: string) => void	`—`	Callback triggered when the value of the select changes.
disabled	boolean	`false`	When true, prevents user interaction with the select trigger.
name	string	`—`	The name attribute for HTML form submissions.
required	boolean	`false`	Whether an option must be selected before submitting.

Keyboard Navigation: Open via Enter or Space, navigate options using Up / Down arrows, confirm with Enter, and dismiss with Escape.
Typeahead: Focuses matching options when typing alphanumeric characters.
Radix Primitive: Adheres to WAI-ARIA Select pattern with correct combobox and listbox roles.

On This Page