← All patterns · Input widgets

Combobox

Text input with an associated popup of suggestions.

Pattern

A combobox combines a single-line text input with a popup of options the user can browse and select. Variants include autocomplete (filter as you type) and dropdown-only (no free input).

Roles

  • combobox
  • listbox
  • option

States and properties

aria-expanded
On the combobox input; reflects popup state.
aria-controls
On the input, pointing at the popup.
aria-activedescendant
On the input, pointing at the active option.
aria-autocomplete
list, inline, both, or none.

Keyboard interaction

Down arrow
Open the popup; move to next option.
Up arrow
Move to previous option.
Enter
Select the active option.
Escape
Close the popup; restore input.

WCAG criteria

  • 2.1.1 — Keyboard
  • 4.1.2 — Name, Role, Value

Canonical reference

WAI-ARIA Authoring Practices Guide — Combobox

More