Behavior comparison
Combobox vs Listbox
Decisive difference
Combobox is the value control that owns an associated popup and may accept typing; Listbox is the option widget itself, standalone or inside that popup.
Choice criteria, links and sources
- ComboboxChoose Combobox if the user types or filters to reach a value and the options appear only on demand.Open entry Combobox
- ListboxChoose Listbox if the options stay visible on the page or if several may be selected at once.Open entry Listbox
See the nine dimensionsSee the sources
Choose from a list
Try it
Is the person choosing a native value, filtering by typing, or navigating a list?
Combobox
Shared trial context
A form asks the user to choose one value from a known option set before continuing.
Combobox
Mission
Combobox
Type Porto, move through suggestions with arrows, commit the correct city, then clear and recover from no results.
Typing narrows the available options.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- Matching city options appear as the query changes and one active option is visually and programmatically identified.
- Edge case
- A query with no match keeps the typed value, announces that no options exist, and offers a clear recovery path.
Listbox
Mission
Listbox
Focus the list, reach Last 30 days with arrows, select it, and verify the selected state remains visible.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- All four presets remain visible; the selected row is highlighted and reflected in the status. This native specimen has no separate active-versus-committed state.
- Edge case
- A disabled custom range is announced, skipped when required by the keyboard model, and never mistaken for the selected value.
What this example shows
Combobox is the value control that coordinates an associated popup and may be editable or select-only; Select is a native predefined-option form control, while Listbox is the composite option widget that can stand alone or serve as a popup.
Which fits your need?
Combobox
A value control needs an associated popup for options or richer assistance
Listbox
One or more values are chosen from a named composite option set
Difference and sources
Combobox is the value control that coordinates an associated popup and may be editable or select-only; Select is a native predefined-option form control, while Listbox is the composite option widget that can stand alone or serve as a popup.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Label
The persistent text that names a control or field.
Decision
Family question
Is the person choosing a native value, filtering by typing, or navigating a list?
Three criteria to choose
- Trigger
Combobox
Focus, typing, or an optional disclosure button opens matching suggestions.
Listbox
Focus or pointer entry reaches an option list that is already visible.
- Interactivity
Combobox
Combines text editing with keyboard navigation and selection of a suggested value.
Listbox
Supports single or multiple option selection with managed keyboard movement; options are not actions.
- Focus
Combobox
In this editable listbox-popup specimen, DOM focus remains in the input while the active-option relationship communicates list navigation; other popup roles follow their own focus model.
Listbox
The native sized select is one tab stop. In this single-select specimen, selection follows keyboard focus, so active and selected state move together; custom listboxes must declare their own model.
Nine dimensions
- Trigger
Combobox
Focus, typing, or an optional disclosure button opens matching suggestions.
Listbox
Focus or pointer entry reaches an option list that is already visible.
- Modality
Combobox
Non-modal editable input with an associated suggestion popup.
Listbox
Non-modal selection widget embedded in the current form or task.
- Placement
Combobox
The suggestion list is anchored to the input and kept visible within the viewport.
Listbox
An inline, visible list rather than a closed picker popup.
- Interactivity
Combobox
Combines text editing with keyboard navigation and selection of a suggested value.
Listbox
Supports single or multiple option selection with managed keyboard movement; options are not actions.
- Focus
Combobox
In this editable listbox-popup specimen, DOM focus remains in the input while the active-option relationship communicates list navigation; other popup roles follow their own focus model.
Listbox
The native sized select is one tab stop. In this single-select specimen, selection follows keyboard focus, so active and selected state move together; custom listboxes must declare their own model.
- Dismissal
Combobox
Escape closes an open popup without committing a new value; whether text is preserved and which other actions close it are defined by the combobox subtype.
Listbox
In this standalone specimen, leaving with Tab preserves the selected value; when a listbox is a popup, dismissal is coordinated by its owning control.
- Accessible role
Combobox
combobox + popup (listbox | grid | tree | dialog)
Listbox
listbox > option
- Use case
Combobox
A value control needs an associated popup for options or richer assistance
Listbox
One or more values are chosen from a named composite option set
- Mobile behavior
Combobox
Keep suggestions visible above the software keyboard; use a larger search surface for very large datasets.
Listbox
Use large option rows and controlled scrolling; prefer a native select for a short simple list.
| Dimension | ComboboxCombobox | ListboxListbox |
|---|---|---|
| Trigger | Focus, typing, or an optional disclosure button opens matching suggestions. | Focus or pointer entry reaches an option list that is already visible. |
| Modality | Non-modal editable input with an associated suggestion popup. | Non-modal selection widget embedded in the current form or task. |
| Placement | The suggestion list is anchored to the input and kept visible within the viewport. | An inline, visible list rather than a closed picker popup. |
| Interactivity | Combines text editing with keyboard navigation and selection of a suggested value. | Supports single or multiple option selection with managed keyboard movement; options are not actions. |
| Focus | In this editable listbox-popup specimen, DOM focus remains in the input while the active-option relationship communicates list navigation; other popup roles follow their own focus model. | The native sized select is one tab stop. In this single-select specimen, selection follows keyboard focus, so active and selected state move together; custom listboxes must declare their own model. |
| Dismissal | Escape closes an open popup without committing a new value; whether text is preserved and which other actions close it are defined by the combobox subtype. | In this standalone specimen, leaving with Tab preserves the selected value; when a listbox is a popup, dismissal is coordinated by its owning control. |
| Accessible role | combobox + popup (listbox | grid | tree | dialog) | listbox > option |
| Use case | A value control needs an associated popup for options or richer assistance | One or more values are chosen from a named composite option set |
| Mobile behavior | Keep suggestions visible above the software keyboard; use a larger search surface for very large datasets. | Use large option rows and controlled scrolling; prefer a native select for a short simple list. |