Dropdown Component
A flexible dropdown component that supports rich content, keyboard navigation, and accessibility features.
Basic Usage
A simple dropdown with text options.
Choose a fruit...
Selected: None
Rich Content
Options can include icons, colors, and other rich content.
Select color...
Selected: None
Grouped Options
Options can be organized into groups with separators.
Select item...
Selected: None
Form Integration
Dropdown works seamlessly with BeatUI form controllers.
Medium
Choose your preferred size
Controller value: medium
Accessibility Features
- Full keyboard navigation (Arrow keys, Enter, Escape)
- ARIA attributes for screen readers
- Focus management and visual indicators
- High contrast mode support
- Reduced motion support
Keyboard Navigation
Navigation:
- ↓ Arrow Down - Open dropdown / Move down
- ↑ Arrow Up - Move up
- Enter - Select focused option
- Escape - Close dropdown
Interaction:
- Click - Open/close dropdown
- Tab - Move to next element
- Space - Open dropdown (when not searchable)