Combobox
An accessible combobox component (select/autocomplete) following the ARIA combobox pattern. Features type-ahead search, keyboard navigation, and screen reader support.
Basic Usage
Select from a list of options with keyboard navigation and search.
import { useState } from 'react';
import { AccessibleCombobox } from '@a13y/react';
function Example() {
const [value, setValue] = useState('');
const options = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
];
return (
<AccessibleCombobox
label="Select an option"
options={options}
value={value}
onChange={setValue}
/>
);
}With Type-ahead Search
Type to filter options dynamically.
Combobox Props
| Name | Type | Default | Description |
|---|---|---|---|
label* | string | - | Label for the combobox |
options* | ComboboxOption[] | - | Array of selectable options |
value* | string | - | Currently selected value |
onChange* | (value: string) => void | - | Callback fired when selection changes |
placeholder | string | 'Select...' | Placeholder text when no option is selected |
searchable | boolean | true | Enable type-ahead search |
disabled | boolean | false | Disable the combobox |
error | string | - | Error message to display |
className | string | - | Optional CSS class |
ComboboxOption Props
| Name | Type | Default | Description |
|---|---|---|---|
value* | string | - | Value of the option |
label* | string | - | Display text for the option |
Keyboard Navigation
↓Move to next option
↑Move to previous option
EnterSelect option
EscClose dropdown
Accessibility Features
- ✓Implements ARIA Combobox pattern with
role="combobox" - ✓Uses
aria-activedescendantfor current option - ✓Full keyboard navigation with arrow keys
- ✓Type-ahead search for quick filtering
- ✓Screen reader announcements for selection changes