Back to componentszyra-select
Select
Custom dropdown select for choosing from a list of options — fully keyboard accessible with smooth open/close animation.
API
All inputs and configuration options for zyra-select.
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | 'Select an option' | Text shown when no value is selected |
size | 'sm' | 'md' | 'lg' | 'md' | Height and font scale |
appearance | 'outline' | 'filled' | 'underline' | 'outline' | Visual style of the trigger |
value (on option) | string | number | null | - | The value emitted when the option is selected |
disabled (on option) | boolean | false | Prevents an option from being selected |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Trigger uses aria-haspopup="listbox" and aria-expanded to communicate state
- Panel uses role="listbox"; options use role="option" with aria-selected
- aria-activedescendant on the trigger tracks the keyboard-highlighted option
- Arrow keys navigate options; Enter/Space selects; Escape closes; Tab dismisses
- Disabled options are marked aria-disabled and skipped by keyboard navigation