Inputs
Select
Pick one value from a list. Same visual language as Input field.
Examples
States
Rendered states (visual reference; the live example above is the accessible one) | Default | Hover | Focus visible | Pressed | Disabled |
|---|
| Closed | | | | | |
|---|
Anatomy
Select anatomy| # | Part | Description | Presence |
|---|
| 1 | Label | Above, always visible | Required |
|---|
| 2 | Trigger | Pill, 36 / 44 / 52px | Required |
|---|
| 3 | Chevron | Decorative | Required |
|---|
| 4 | Error | Below the trigger | Optional |
|---|
Specifications
| Heights | Small 36px · Medium 44px · Large 52px |
|---|
| Horizontal padding | 8px / 12px by size |
|---|
| Font size | 14px to 18px with size |
|---|
| Focus | 1.5px stroke in primary indigo |
|---|
| Radius | Pill |
|---|
Interaction
Keyboard| Key | Result |
|---|
| Tab | Moves focus |
|---|
| Space Enter ↓ | Opens the list |
|---|
| ↑ ↓ | Changes the value |
|---|
| Type a letter | Jumps to a matching option |
|---|
| Esc | Closes without changing |
|---|
Pointer and touch| Trigger | Response |
|---|
| Click | Opens the platform list |
|---|
| Focus | 1.5px indigo stroke |
|---|
| Touch | Opens the OS picker, which users already know |
|---|
Accessibility
role · combobox (native select)
1.3.1Info and Relationships1.4.11Non-text Contrast2.1.1Keyboard4.1.2Name, Role, Value
Requirements| Requirement | How Rig meets it |
|---|
| Native select | Use <select> up to about 15 options. It is accessible on every device out of the box. |
|---|
| Custom listbox | Only if you need rich options; then follow the APG select-only combobox pattern |
|---|
| Label | <label for> pointing at the select |
|---|
| Error | aria-invalid and a linked message |
|---|
Read the matching WAI pattern ↗
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Use for 7 or more options | ✕Do not use for 2 to 3 options (use Radio) |
| ✓Show the current value, not a placeholder, once chosen | ✕Do not trigger navigation on change (WCAG 3.2.2) |
Notes from the Figma file
- Error text renders beneath the trigger when State is Error.