Combobox
also called combo box (hig), autocomplete
A text input paired with a list of suggestions that narrows as you type, where the list can be navigated and chosen from with the keyboard.
A combobox is two controls wearing one coat: a field you can type into and a listbox that responds to what you typed. That pairing is why it is the hardest common component to build correctly, and why it is worth building once and reusing.
The accessibility contract is specific. The input carries role="combobox",
aria-expanded, and aria-controls pointing at the list. Focus stays in the
input while the arrow keys move a highlight through the options, and the option
under the highlight is named by aria-activedescendant. Enter commits, Escape
closes. Moving real focus into the list instead is the usual mistake, and it
breaks typing.
Against a dropdown: if you cannot type into it, it is a select. The suggestion list is the point here, so a combobox earns its complexity when the option set is long enough that scanning it would be worse than typing three letters.
Which word?
| If you want | say |
|---|---|
| a text field that filters a list as you type | combobox |
| the loose word for anything that opens downward | dropdown |
| one keystroke reaches every command by name | command palette |
| one choice from a known list, no typing | select |
| the input is for searching, not for data entry | search field |
| the options are on screen already, not behind a popup | listbox |
| one field, several answers | multi select |
| the field finishes your word inside the field | inline autocomplete |
| suggestions appear and change as you type | typeahead |
Related
See also: Active descendant
Implementations
Specimens illustrate the concept; for production use, start here.
| aria-apg | Combobox |
| shadcn | Combobox |
| carbon | Combo box |