role="combobox"

What role="combobox" means, and when to use it

Use combobox for an input that pops something up to help you fill it, whether that popup is a listbox, a grid, a tree or a dialog. The role carries two obligations that are the whole point of it. It has to name what it controls, and it has to say whether that popup is currently open.

The HTML element behind role="combobox"

A select element is a combobox when it renders as a drop-down, and it comes with the keyboard handling, the popup and the state reporting. An input with a list attribute pointing at a datalist is the other native route. Build your own only when you need something those two cannot do.

Widget roles say an element is a control somebody has to operate

A widget role tells assistive technology that an element is interactive and what kind of control it is. Buttons, checkboxes, sliders, tabs and menu items all live here.

Using one is a promise, and the keyboard is the half people underestimate. ARIA changes what gets announced and nothing else, so calling a div a checkbox does not make the space bar toggle it. You write that yourself. Eight of these roles carry a stricter duty again, because ARIA puts a must-level obligation on authors to manage focus inside grid, listbox, menu, menubar, radiogroup, tree, treegrid and tablist.

One role here has a measured failure rate. WebAIM found an ARIA menu on 5.7% of the top million home pages in 2026, and 22% of those menus introduced barriers, because the markup and the keyboard behavior a menu needs were never added.

Where role="combobox" sits in the model

Inherits from

input → widget → roletype

The name can come from

aria-labelledby or aria-label. Its own text does not become the name, so text inside it will not be read as one.

States and properties it supports

aria-activedescendant, aria-autocomplete, aria-errormessage, aria-haspopup, aria-invalid, aria-readonly, aria-required

The normative definition stays with the W3C, so it cannot go stale here. combobox in the ARIA specification.

How a checker tests role="combobox"

Getting this one wrong is easy to assume is a 4.1.2 Name, Role, Value problem, and mostly it is not. A missing required state is first of all a WAI-ARIA conformance failure, and W3C notes that 4.1.2 is the looser test of the two, because a browser will often fall back on a value that passes it. These are the published test rules that apply.

• Element with role attribute has required states and properties
• Role attribute has valid value

The other widget roles

• button A button does something when you activate it. If it goes to a URL instead, that is a link.
• checkbox A control with two or three states that has to announce which one it is in.
• grid A table you can move through cell by cell with the keyboard.
• gridcell One cell in a grid.
• link A link goes somewhere. If it acts on the page you are already on, that is a button.
• listbox A list of options someone can move through and choose from.
• menu A list of commands, usually opened from a trigger, and built to be driven with arrow keys.
• menubar A menu that stays visible and lays its options out along a bar.
• menuitem One command inside a menu.
• menuitemcheckbox A menu item that toggles on and off like a checkbox.
• menuitemradio A menu item that is one option in a set where only one can be chosen.
• option One choice inside a listbox, which has to announce whether it is currently selected.
• progressbar Shows how far a task has got. It is read-only, not something to operate.
• radio One option in a set where only one can be chosen, and it belongs inside a radiogroup.
• radiogroup The container that turns a set of radios into a single choice rather than several separate ones.
• scrollbar A control that scrolls something, and has to say what it scrolls and where it currently sits.
• searchbox A text input meant for search queries.
• slider A control you set by moving a handle along a range.
• spinbutton A control for stepping a value up and down.
• switch A binary on-or-off control with no mixed state, usually taking effect the moment it is flipped.
• tab A label that reveals its panel, and it means nothing outside a tablist.
• tablist The container for a set of tabs, which has to actually contain tabs.
• tabpanel The panel a tab reveals.
• textbox A text input that takes free-form typing.
• tree A hierarchy whose branches open and close.
• treegrid A grid whose rows open and close, so it behaves as a table and a tree at once.
• treeitem One node in a tree.