Anatomy
- Label — Identifies the selector's purpose
- Container — Shows the selected value or placeholder
- Select Indicator — 18×18 px ▼, changes with selected state
- Supporting Line — Bottom helper text, supports Default / Error / Success / Warning
- Dropdown — The expanded option list
Usage Guidelines
Do ✓
- Use Selector when there are more than 7 options (use Radio for fewer)
- Provide a meaningful placeholder (e.g. "Select a country")
- Sort options logically (alphabetically, by frequency), with most common options at the top
Don't ✗
- Don't use Selector for fewer than 3 options — Radio is more intuitive
- Don't mix native
<select>and custom Selector in the same form - Don't put excessively long text in options — truncation loses information
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 |