How to build an accessible Combobox in React

Trigger exposes role="combobox" with aria-expanded, aria-controls, aria-haspopup="listbox", and aria-activedescendant pointing at the active option so screen readers track focus through arrow navigation without moving DOM focus off the input; error state is wired via aria-invalid + aria-describedby and announced with role="alert"

When to use a Combobox

• Single-select from a long list where type-to-filter makes finding an option faster
• Form fields where the value is one of many known options (country, assignee, repository)

When not to use it

• Short option lists (≈2–7) where filtering adds no value — use Select or SegmentedControl
• Selecting multiple values — use MultiSelect
• Triggering actions or commands — use Dropdown or CommandMenu

Keyboard interactions

Role combobox, verified at WCAG 2.2-AA.

• ArrowDown
• ArrowUp
• Enter
• Escape
• Tab

Common mistakes

Avoid: Using Combobox to fire actions like "Delete" or "Export"

Prefer: Use Dropdown for actions; Combobox is for picking a value

Combobox has role="combobox" with a listbox of selectable values and onChange semantics — actions belong in a menu

Avoid: Setting searchable={false} on a 200-item list

Without filtering the list becomes an unusable scroll; either keep search on or switch to a different selection pattern

Example

<Combobox
  label="Country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'de', label: 'Germany' },
    { value: 'fr', label: 'France' },
  ]}
  onChange={(value) => console.log(value)}
/>

See the full Combobox reference →