Multi Select
A keyboard-navigable dropdown for selecting multiple items with advanced focus management.
Select Actions
The component provides different selection behaviors based on current state:
- Checkbox focus + Enter/Space: Toggle individual item
- Button focus + Enter/Space: Smart selection (Select Only, Select All, or Toggle based on context)
- Hidden action labels: Appear on hover/focus to show available actions
Hover over items to see action labels. Different actions appear based on selection state.
Keyboard Navigation
The Multi Select component supports comprehensive keyboard navigation:
- Up/Down arrows: Navigate between rows while maintaining checkbox/button focus state
- Left/Right arrows: Switch between checkbox and button focus within the current row
- Tab: Focus away from the menu (natural tab behavior)
- Enter/Space: Execute actions based on current focus (checkbox toggle or button click)
Try keyboard navigation: ↑ ↓ for rows, ← → for checkbox/button focus, Tab to cycle through all elements
Controlled State
Use controlled state to manage selections programmatically.
Clear All, Core Features, Advanced Features
Was this helpful?