Interactive Demo
Current State
Dropdown state: Default (closed)
Selected item: None
Interaction Guide
- Click the dropdown to open/close the menu
- Select an item to choose it and close the dropdown
- The selected item will be highlighted when the dropdown is reopened
- Dropdown closes automatically when an item is selected
- Press ESC or click outside to close the dropdown
Component States
Default State
Select an item
Shows placeholder text with down arrow
Open State (No Selection)
Select an item
First item
Second item
Third item
Fourth item
Fifth item
Dropdown open with all options visible
Selected State
Third item
Shows selected item with down arrow
Open State (With Selection)
Third item
First item
Second item
Third item
Fourth item
Fifth item
Dropdown open with selected item highlighted