Select
A dropdown component that allows users to choose a single value from a list of options.
Overview
The Select component provides a way for users to choose a single option from a dropdown list. It's designed to be accessible, customizable, and easy to integrate into forms.
Our Select component is built with Radix UI primitives and follows WAI-ARIA best practices. It supports keyboard navigation, screen readers, and can be styled to match your design system.
Basic Usage
The basic Select component provides a clean, accessible dropdown selection.
Examples
With Label
Combine the Select with a label for better accessibility.
Select your favorite fruit from the list.
With Groups
Organize options into logical groups with labels.
Disabled States
Disable the entire select or individual options.
API Reference
The Select component consists of multiple parts that work together to create a complete dropdown experience.
| Component | Props | Description |
|---|---|---|
| Select | defaultValue?: string value?: string onValueChange?: (value: string) => void disabled?: boolean name?: string | The root component that manages the select state. |
| SelectTrigger | className?: string children: React.ReactNode | The button that toggles the select dropdown. Usually contains the SelectValue. |
| SelectValue | placeholder?: string className?: string | Displays the selected value or a placeholder. |
| SelectContent | className?: string children: React.ReactNode position?: "popper" | "item-aligned" | The floating dropdown that contains the select options. |
| SelectItem | value: string disabled?: boolean className?: string children: React.ReactNode | An item in the select dropdown menu. |
| SelectGroup | className?: string children: React.ReactNode | Groups related select items with an optional label. |
| SelectLabel | className?: string children: React.ReactNode | A label for a group of select items. |
All components accept standard HTML attributes in addition to the props listed above.
Usage Guidelines
Follow these guidelines for effective use of the Select component:
Best Practices
Do
- Use clear, descriptive labels for the select and its options
- Group related options when the list is long
- Provide a meaningful placeholder that indicates what to select
- Use disabled states appropriately to indicate unavailable options
- Consider the default selected value carefully
Don't
- Use for very short lists (2-3 items) where radio buttons might be better
- Include too many options without grouping or filtering
- Use vague labels or placeholders that don't indicate the purpose
- Nest select dropdowns within each other
- Use for multiple selection (use checkboxes or a multi-select component instead)
Accessibility
The Select component is designed with accessibility in mind, following best practices for interactive UI elements.
Keyboard Navigation
Users can navigate the select using arrow keys, type to search for options, use Enter to select, and Escape to close the dropdown.
ARIA Attributes
The component uses appropriate ARIA attributes like aria-expanded, aria-selected, and aria-labelledby to communicate state to assistive technologies.
Accessibility Tip
Always pair the Select component with a visible label using the htmlFor attribute to connect them. This improves usability for all users, especially those using screen readers.