Select exists to allow users to choose exactly one option from a predefined list. It reduces cognitive load by eliminating free-form input when the valid options are known in advance.
**Design Goal:** The user can see available options, make a selection, and confirm their choice without typing or guessing.
---
## 2. WHEN TO USE
- Choosing from 5–20 predefined options
- Selecting a single value (country, status, category)
- When options have clear labels
- When free-form input would cause errors
## 3. WHEN NOT TO USE
- Fewer than 4 options (use Radio Group or Segmented Control)
- More than 50 options (use Searchable Select or Autocomplete)
- Multiple selections (use Multi-Select or Checkbox Group)
- Boolean choice (use Switch or Checkbox)
- Free-form entry (use Input)
---
## 4. USER EXPECTATION
- Clicking the field reveals all options
- Selected option is clearly indicated
- Current selection is visible when closed
- Options are searchable if list is long
- Keyboard can navigate options
- Disabled options are visually distinct
---
## 5. INTERACTION CONTRACT
| Event | Response |
|-------|----------|
| Click | Open dropdown, show options |
| Click option | Select option, close dropdown |
| Click outside | Close dropdown, keep selection |
| Tab | Move focus to next field, close dropdown |
| Arrow Down | Open dropdown or move to next option |
| Arrow Up | Move to previous option |
| Enter | Select focused option, close dropdown |
| Escape | Close dropdown, revert to previous selection |
| Type letter | Jump to first option starting with that letter |
---
## 6. FAILURE BEHAVIOUR
| Scenario | Response |
|----------|----------|
| No option selected | Show placeholder, allow form submission if optional |
| Required but empty | Show error on blur or submit |
| Option disabled | Prevent selection, show disabled state |
| Options load asynchronously | Show loading state, then populate |
| Options fail to load | Show error, allow retry |
| User types non-matching letter | No action, or show "no results" |
---
## 7. ACCESSIBILITY CONTRACT
- **Label:** Every Select MUST have associated `<label>` or `aria-label`
- **Role:** MUST use `role="combobox"` or native `<select>`
- **Expanded:** MUST communicate open/closed state with `aria-expanded`
- **Selected:** MUST communicate selected option with `aria-selected`
- **Focus:** Focus MUST move to dropdown when opened, return to trigger when closed
- **Screen reader:** MUST announce number of options, current selection, and position
- **Keyboard:** MUST support all interaction contract keyboard events
---
## 8. AI CONTRACT
| Scenario | AI Choice |
|----------|-----------|
| 5–20 predefined options, single choice | Select |
