SELECTOR

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