Select
Custom select dropdown with keyboard navigation, label, and error support.
Example
Country
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | — | Required | Accessible label text |
options | SelectOption[] | — | Required | Array of { value, label, disabled? } |
value | string | — | No | Controlled selected value |
defaultValue | string | — | No | Initial value (uncontrolled) |
onChange | (value: string) => void | — | No | Called when selection changes |
placeholder | string | 'Select an option' | No | Placeholder text |
description | string | — | No | Helper text |
error | string | — | No | Error message |
required | boolean | — | No | Marks as required |
disabled | boolean | — | No | Disables the select |
hideLabel | boolean | false | No | Visually hides label |
Accessibility
- role="combobox" on trigger with aria-expanded, aria-haspopup
- role="listbox" on dropdown with aria-activedescendant
- Full keyboard support: Arrow keys, Enter, Escape, Home, End
- Type-ahead character matching
Related Tokens
--select-surface--select-on-surface--select-border--select-gap--select-trigger-gap--select-label-font-weight--select-listbox-margin-top--select-option-margin-x