Behavior comparison
Listbox vs Select
Decisive difference
Listbox is a composite widget you compose and style, with single or multiple selection; Select is the native form control the browser renders and manages.
Choice criteria, links and sources
- ListboxChoose Listbox if the options need custom rendering, stay visible, or support multiple selection with keyboard patterns you control.Open entry Listbox
- SelectChoose Select if a known set of values fits a plain form field and native behavior 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?
Listbox
Shared trial context
A form asks the user to choose one value from a known option set before continuing.
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.
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
Listbox is the composite option widget and can be standalone or a popup with single or multiple selection; Select is a native form control, while Combobox is the value control that owns or controls an associated popup.
Which fits your need?
Listbox
One or more values are chosen from a named composite option set
Select
Choosing one or more known values from a predefined list
Difference and sources
Listbox is the composite option widget and can be standalone or a popup with single or multiple selection; Select is a native form control, while Combobox is the value control that owns or controls an associated 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
Listbox
Focus or pointer entry reaches an option list that is already visible.
Select
Pressing the labeled native control opens the platform picker.
- Interactivity
Listbox
Supports single or multiple option selection with managed keyboard movement; options are not actions.
Select
Selects one value from options; it does not contain arbitrary actions or searchable content.
- Focus
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.
Select
The native control delegates focus and option navigation to the platform for its declared single or multiple presentation.
Nine dimensions
- Trigger
Listbox
Focus or pointer entry reaches an option list that is already visible.
Select
Pressing the labeled native control opens the platform picker.
- Modality
Listbox
Non-modal selection widget embedded in the current form or task.
Select
A non-modal form choice whose popup behavior is owned by the browser or operating system.
- Placement
Listbox
An inline, visible list rather than a closed picker popup.
Select
An inline form control; the opened option surface is positioned by the platform.
- Interactivity
Listbox
Supports single or multiple option selection with managed keyboard movement; options are not actions.
Select
Selects one value from options; it does not contain arbitrary actions or searchable content.
- Focus
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.
Select
The native control delegates focus and option navigation to the platform for its declared single or multiple presentation.
- Dismissal
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.
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
Listbox
listbox > option
Select
select
- Use case
Listbox
One or more values are chosen from a named composite option set
Select
Choosing one or more known values from a predefined list
- Mobile behavior
Listbox
Use large option rows and controlled scrolling; prefer a native select for a short simple list.
Select
Prefer the native mobile picker unless the product genuinely needs richer filtering behavior.
| Dimension | ListboxListbox | SelectSelect |
|---|---|---|
| Trigger | Focus or pointer entry reaches an option list that is already visible. | Pressing the labeled native control opens the platform picker. |
| Modality | Non-modal selection widget embedded in the current form or task. | A non-modal form choice whose popup behavior is owned by the browser or operating system. |
| Placement | An inline, visible list rather than a closed picker popup. | An inline form control; the opened option surface is positioned by the platform. |
| Interactivity | Supports single or multiple option selection with managed keyboard movement; options are not actions. | Selects one value from options; it does not contain arbitrary actions or searchable content. |
| Focus | 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. | The native control delegates focus and option navigation to the platform for its declared single or multiple presentation. |
| Dismissal | In this standalone specimen, leaving with Tab preserves the selected value; when a listbox is a popup, dismissal is coordinated by its owning control. | 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 | listbox > option | select |
| Use case | One or more values are chosen from a named composite option set | Choosing one or more known values from a predefined list |
| Mobile behavior | Use large option rows and controlled scrolling; prefer a native select for a short simple list. | Prefer the native mobile picker unless the product genuinely needs richer filtering behavior. |