When to Use
Example: checkout — shipping region
- Choosing one value from a long predefined list (7+ items) where showing all options inline is impractical
- Form fields like country, language, category, or time zone selection
- Space-constrained layouts where a dropdown saves vertical space
- For fewer than 3 visible options, use Radio for immediate comparison
Usage Guidelines
DO
Use Selector when there are more than 7 options; provide a meaningful placeholder and sort options logically
Don’t
Don't use Selector for fewer than 3 options — Radio is more intuitive
Interaction Behavior
| State | Description |
|---|---|
| Default | Inactive, showing placeholder or selected value |
| Activated | Click opens dropdown panel, border highlights |
| Selected | Option selected, displays selected value |
| Disabled | Fully grayed out, cannot open |
| Error | Border and Supporting Line show error style |
Accessibility
| Requirement | Implementation |
|---|---|
| Container semantics | role="combobox" + aria-expanded |
| Dropdown list | role="listbox" |
| Options | role="option" + aria-selected |
| Keyboard operation | Enter/Space to open; ↑↓ to navigate; Enter to select; Escape to close |