Combobox

A combobox combines a text input with a dropdown listbox, letting users either type a value or select from filtered suggestions.

Demo

Click or tab into the input field and start typing to filter the list of options. Use the Down Arrow key to move into the suggestion list, Up and Down to navigate between options, Enter to select one, and Escape to dismiss the list and return focus to the input.

What to Observe

• As you type, the suggestion list updates and screen readers announce the number of available options.
• Arrow key navigation moves through the list without losing the typed value in the input.
• The currently highlighted option is announced by assistive technology as focus moves through the list.
• Pressing Escape closes the list and returns focus cleanly to the text input.
• Selecting an option populates the input field and closes the list, communicating the completed selection.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Text input — The editable field where the user types to filter options; carries role="combobox" and controls the popup visibility via aria-expanded.
2. Label — A <label> associated with the input that names the control for all users.
3. Listbox popup — The dropdown container with role="listbox" that holds the filterable options.
4. Option items — Individual items inside the listbox, each carrying role="option" and an aria-selected state.
5. Toggle button — An optional button to open or close the popup without typing, often represented as a chevron icon.

Accessibility Behavior

• The input must carry aria-expanded to communicate whether the suggestion list is open or closed.
• The active option in the list must be indicated via aria-activedescendant on the input, so screen readers track focus without moving DOM focus out of the input.
• Each option must have role="option" and an aria-selected attribute that updates when the option is chosen.
• The number of available suggestions should be announced when the list opens or updates.
• Keyboard users must be able to open, navigate, select from, and close the list without a mouse.
• If no results match the typed value, that empty state must be communicated rather than silently hiding all options.

Common Mistakes

• Omitting aria-expanded on the input, leaving screen reader users unaware that a suggestion list exists.
• Moving DOM focus into the listbox instead of using aria-activedescendant, which clears the typed text and disorients users.
• Filtering options visually but not updating the accessible list, so screen readers announce stale or hidden items.
• Failing to handle Escape, trapping keyboard users inside an open list they cannot dismiss.
• Using a plain <ul> without ARIA roles, making the suggestion list invisible to assistive technology.

Why This Matters

Comboboxes are frequently used in search bars, address fields, and product filters — high-traffic interactions where inaccessibility has a large impact. When the ARIA states are missing or incorrect, screen reader users cannot tell whether a list is open, which option is highlighted, or whether their selection was accepted. This effectively prevents them from completing tasks that sighted users accomplish in seconds, reinforcing a two-tiered experience on the most visible parts of a product.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code