Select
An accessible dropdown component with full keyboard navigation and ARIA support.
Interactive Playground
Select
Try different states and options
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options * | Array<{value, label}> | - | Array of options to display |
value | any | null | Selected value (bindable) |
placeholder | string | 'Select...' | Placeholder text when no value selected |
labelKey | string | 'label' | Key to use for option labels |
valueKey | string | 'value' | Key to use for option values |
disabled | boolean | false | Disables the select |
error | boolean | false | Shows error styling |
onchange | function | - | Called when selection changes with selected option |
Examples
Basic Usage
Custom Keys
Use labelKey and valueKey for objects with different property names:
Change Handler
Keyboard Navigation
Arrow Down Open dropdown / Move to next option
Arrow Up Open dropdown / Move to previous option
Enter Select highlighted option
Space Select highlighted option
Escape Close dropdown
Home Jump to first option
End Jump to last option
Tab Close and move focus
Accessibility
- Uses
role="listbox"androle="option" - Proper
aria-expanded,aria-haspopup,aria-controls - Active descendant tracking with
aria-activedescendant - Auto-scrolls highlighted option into view
- Focus returns to trigger after selection
- Click-outside detection for closing