Combobox

Role and semantics

Combobox is drawn with Base UI Combobox. The input carries role="combobox" and is tied to the list with aria-expanded and aria-controls; its name comes from the visible label through Field, and the description and error are linked with aria-describedby. The list is role="listbox" and options are role="option" with aria-selected. The highlighted option is announced through aria-activedescendant; focus stays in the input. The loading and no-results rows are in a role="status" region. Chip remove buttons have names such as “Remove Ankara”.

Keyboard

Key	Behaviour
Typing	Opens and filters the list.
Down and up arrow	Opens the list; moves between options.
Enter	Chooses the highlighted option.
Escape	Closes the list; when closed, clears the text.
Backspace	With multiple, removes the last chip from an empty input.
Left and right arrow	With multiple, moves between chips from an empty input.
Tab	Leaves the field without choosing.

The chevron button is not in the tab order; the input is the keyboard path.

Focus

Focus stays in the input; the highlight in the list is visual and through aria-activedescendant. While the field has focus, its border and a 2 px color-focus-ring outline 2 px outside the box show. After the clear and chip remove buttons act, focus returns to the input.

Screen reader output

Example	Read as
Focus on the input	“City, combo box, collapsed, The list narrows as you type.”
List open	“Ankara, 2 of 7”
Loading	“Loading”
No results	“No results”
Removing a chip	“Remove Ankara, button”

Contrast

Text and labels keep at least 4.5:1 on the background; the input border and chevron keep at least 3:1. The chosen option is shown with a check mark, not by colour alone.

WCAG 2.2

Criterion	How Combobox meets it	What the product team must do
1.3.1 Info and relationships	Label, description and error are linked through Field.	Always give a label.
1.4.1 Use of colour	The choice is also shown with a check mark.	Do not hide the mark.
2.1.1 Keyboard	Arrow keys, Enter, Escape, Backspace.	Do not add your own key handlers.
3.3.1 Error identification	error is read with the input.	Say how to fix the error.
4.1.2 Name, role, value	combobox, listbox and option roles and states.	Keep option labels unique.
4.1.3 Status messages	Loading and no results are announced with role="status".	Turn off loading when loading ends.