Skip to main content
Back to Home

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

NameTypeDefaultDescription
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
placeholderstring'Select...'Placeholder text when no option is selected
searchablebooleantrueEnable type-ahead search
disabledbooleanfalseDisable the combobox
errorstring-Error message to display
classNamestring-Optional CSS class

ComboboxOption Props

NameTypeDefaultDescription
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-activedescendant for current option
  • Full keyboard navigation with arrow keys
  • Type-ahead search for quick filtering
  • Screen reader announcements for selection changes