Select

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Select component provides a dropdown selection interface for choosing from a list of options. Built on Radix UI, it offers accessibility features, keyboard navigation, search functionality, and flexible styling. Perfect for forms, filters, settings, and any scenario requiring option selection.

Basic Usage

View in Storybook

Controlled Select

Selected: apple

With Groups and Labels

Disabled States

Disabled Select

Select with Disabled Items

Rich Content Items

Form Integration

Country

Language

Timezone

Multiple Selects

Filter Options

Category

Status

Priority

Assignee

Current Filters:
Category: All
Status: active
Priority: Any
Assignee: Anyone

Properties

Select

Property	Type	Default	Description
value	string	-	The controlled value of the select.
defaultValue	string	-	The default value for uncontrolled usage.
onValueChange	(value: string) => void	-	Callback when the value changes.
disabled	boolean	false	Whether the select is disabled.
required	boolean	false	Whether the select is required for form submission.
name	string	-	The name attribute for form submission.
dir	"ltr" | "rtl"	-	The reading direction.

SelectTrigger

Property	Type	Description
className	string	Additional CSS classes for the trigger.
children	ReactNode	Trigger content (typically SelectValue).

SelectValue

Property	Type	Description
placeholder	string	Placeholder text when no value is selected.
className	string	Additional CSS classes.

SelectContent

Property	Type	Default	Description
position	"item-aligned" | "popper"	"popper"	Positioning strategy for the content.
side	"top" | "right" | "bottom" | "left"	"bottom"	Preferred side to render the content.
align	"start" | "center" | "end"	"center"	Alignment relative to the trigger.
sideOffset	number	4	Distance from the trigger element.
className	string	-	Additional CSS classes.

SelectItem

Property	Type	Description
value	string	The value of this select item.
disabled	boolean	Whether this item is disabled.
textValue	string	Optional text value for search/filtering.
className	string	Additional CSS classes.
children	ReactNode	Item content.

SelectGroup

Property	Type	Description
className	string	Additional CSS classes for the group.
children	ReactNode	Group content (labels and items).

SelectLabel

Property	Type	Description
className	string	Additional CSS classes for the label.
children	ReactNode	Label text.

Accessibility

The Select component includes comprehensive accessibility features:

• Keyboard Navigation - Arrow keys, Enter, Space, Escape, and type-ahead search
• Screen Reader Support - Proper ARIA attributes and announcements
• Focus Management - Clear focus indicators and logical tab order
• Form Integration - Works seamlessly with form validation and submission
• Search Functionality - Built-in type-ahead search for quick selection
• Portal Rendering - Renders in document body to avoid z-index issues

Common Use Cases

The Select component is perfect for:

• Forms & Settings - Country selection, language preferences, category choices
• Filters & Sorting - Data filtering, sort options, view preferences
• User Management - Role assignment, status updates, team selection
• E-commerce - Product variants, shipping options, payment methods
• Content Management - Category assignment, status changes, author selection
• Data Tables - Column filtering, pagination controls, bulk actions

Best Practices

1. Clear Placeholders - Use descriptive placeholder text that explains the selection
2. Logical Grouping - Group related options with labels and separators
3. Appropriate Defaults - Provide sensible default selections when appropriate
4. Search Optimization - Ensure items have good textValue for type-ahead search
5. Mobile Optimization - Test dropdown behavior on mobile devices
6. Performance - Consider virtualization for very large option lists
7. Accessibility - Always provide proper labels and test with screen readers
8. Consistent Styling - Maintain consistent select styling across your application