Combobox
An autocomplete pattern combining text input with a selection list
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemscombobox role on the input
The text input must have role="combobox".
aria-expanded on the input
The input must reflect the dropdown state via aria-expanded="true/false".
aria-controls references the listbox
The input must reference the dropdown list id via aria-controls.
aria-autocomplete attribute
Set aria-autocomplete="list" or "both" to describe the autocomplete behavior.
Arrow key navigation in the list
Up/down arrow keys must navigate through listbox options.
Escape로 팝업 닫기
Escape 키로 팝업을 닫되 입력값은 변경하지 않아야 합니다.
Use aria-activedescendant
Set aria-activedescendant on the input to reflect the currently highlighted option.
Enter key selects option
Pressing Enter must select the currently highlighted option.
Visible label
Provide a visible label connected to the combobox input.
Do not open the dropdown on mouse hover only
The popup must also be openable via keyboard (e.g., arrow key or Enter).
Do not trap focus in the dropdown
Focus must remain on the combobox input while navigating the dropdown list.
Additional checks
Connect Autocomplete label
Always pass the renderInput prop with a TextField that includes a label.
Code sample
Implementation notes
- –MUI Autocomplete automatically handles the combobox role and aria-expanded.
- –When using freeSolo, inform screen reader users how their typed value will be handled.