Behavior comparison
Combobox vs Select
Decisive difference
Combobox coordinates an associated popup and may accept free typing; Select is a native control whose value comes only from predefined options.
Choice criteria, links and sources
- ComboboxChoose Combobox if the user must filter, type, or browse a popup richer than a closed list.Open entry Combobox
- SelectChoose Select if the values are known and few and the native control is enough.Open entry Select
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.
Select
Mission
Select
Choose Portugal with pointer and keyboard, then confirm the selected form value is identical.
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
- The labeled native select shows the current country and opens the platform's option picker.
- Edge case
- The required placeholder option cannot be submitted as a valid country and its error remains linked to the field.
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
Select
Choosing one or more known values from a predefined list
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.
Select
Pressing the labeled native control opens the platform picker.
- Interactivity
Combobox
Combines text editing with keyboard navigation and selection of a suggested value.
Select
Selects one value from options; it does not contain arbitrary actions or searchable content.
- 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.
Select
The native control delegates focus and option navigation to the platform for its declared single or multiple presentation.
Nine dimensions
- Trigger
Combobox
Focus, typing, or an optional disclosure button opens matching suggestions.
Select
Pressing the labeled native control opens the platform picker.
- Modality
Combobox
Non-modal editable input with an associated suggestion popup.
Select
A non-modal form choice whose popup behavior is owned by the browser or operating system.
- Placement
Combobox
The suggestion list is anchored to the input and kept visible within the viewport.
Select
An inline form control; the opened option surface is positioned by the platform.
- Interactivity
Combobox
Combines text editing with keyboard navigation and selection of a suggested value.
Select
Selects one value from options; it does not contain arbitrary actions or searchable content.
- 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.
Select
The native control delegates focus and option navigation to the platform for its declared single or multiple presentation.
- 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.
Select
For a collapsed single-select, the platform picker closes using its standard commit or cancellation behavior; a list presentation does not imply a dismissible popup.
- Accessible role
Combobox
combobox + popup (listbox | grid | tree | dialog)
Select
select
- Use case
Combobox
A value control needs an associated popup for options or richer assistance
Select
Choosing one or more known values from a predefined list
- Mobile behavior
Combobox
Keep suggestions visible above the software keyboard; use a larger search surface for very large datasets.
Select
Prefer the native mobile picker unless the product genuinely needs richer filtering behavior.
| Dimension | ComboboxCombobox | SelectSelect |
|---|---|---|
| Trigger | Focus, typing, or an optional disclosure button opens matching suggestions. | Pressing the labeled native control opens the platform picker. |
| Modality | Non-modal editable input with an associated suggestion popup. | A non-modal form choice whose popup behavior is owned by the browser or operating system. |
| Placement | The suggestion list is anchored to the input and kept visible within the viewport. | An inline form control; the opened option surface is positioned by the platform. |
| Interactivity | Combines text editing with keyboard navigation and selection of a suggested value. | Selects one value from options; it does not contain arbitrary actions or searchable content. |
| 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 control delegates focus and option navigation to the platform for its declared single or multiple presentation. |
| 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. | For a collapsed single-select, the platform picker closes using its standard commit or cancellation behavior; a list presentation does not imply a dismissible popup. |
| Accessible role | combobox + popup (listbox | grid | tree | dialog) | select |
| Use case | A value control needs an associated popup for options or richer assistance | Choosing one or more known values from a predefined list |
| Mobile behavior | Keep suggestions visible above the software keyboard; use a larger search surface for very large datasets. | Prefer the native mobile picker unless the product genuinely needs richer filtering behavior. |