Listbox vs Select vs Combobox vs Multi-select

Prefer a listbox when the option set must remain visible and the core interaction is moving focus through options, selecting one option, and reviewing the selected row without opening a popup.

Listbox live example Select live example Combobox live example Multi-select live example

Decision dimensions

Dimension	Listbox	Select	Combobox	Multi-select
UI or UX	UI + UX - Visible selectable option list	UI + UX - Single-choice dropdown control	UI + UX - Single-value input widget with owned popup	UI + UX - Multi-value picker widget
UI guidance	Render a labelled listbox container, visible options, active option styling, selected option state, optional grouped labels, empty or disabled states, and nearby help or error text.	Render a persistent label, hint text, native closed value, finite option list, selected option, and validation state.	Render a persistent label, editable or select-only value surface, popup indicator, collapsed and expanded states, option popup, active option, committed selection, clear action when supported, help text, and error text.	Render a filter input, open option list, selected-value chips, remove controls, checked option states, clear-all control, and validation state.
UX guidance	Use a listbox when users benefit from seeing the available options while moving focus through the list and selecting one or more static values.	Help users choose one value from a moderate known list without showing every option permanently.	Use a combobox when users need one value from a large or dynamic option set and benefit from opening a popup, typing to narrow it, or copying/editing the displayed value.	Help users choose multiple values from a large, compact, or dynamic option set.
Good UI	A Role listbox has a visible label, five role options, one active row, one selected row, concise option names, and a status line explaining whether focus or selection changed.	Persistent label, hint text, visible selected value, readable options, and clear required validation state.	An Assignee combobox shows a label, typed text, disclosure button, active option in a listbox, selected-value status, and an error when typed text has no accepted option.	Selected values are shown as removable chips or checked rows with clear labels.
Bad UI	Each option row contains nested Edit and Delete buttons, making the listbox a broken table of actions.	Placeholder as the only label.	A custom dropdown displays matching labels but never exposes expanded state, active option, or the controlled popup.	Selected values hidden inside a closed dropdown.
Good UX	A user arrows from Analyst to Support, hears the active option change, then presses Select active option to commit Support.	Users can open, scan, choose one value, and review the selected value after close.	A user types Ada, moves the active option with Arrow Down, presses Enter to accept Ada Lovelace, then edits the label and sees the selected ID clear until a new option is accepted.	Users can search, add, remove, review, and submit multiple values without losing context.
Bad UX	A high-stakes role assignment saves as soon as focus moves while the user is only exploring options.	Hiding two obvious critical choices in a dropdown.	The component automatically commits the first match as soon as a user types one character.	Removing a value is impossible by keyboard.
Best fit	Users choose one option from a visible static list.	The user chooses one option from a moderate known list.	Users choose one value from a large, dynamic, or filterable option set.	Users choose many values from a long predefined list.
Avoid when	A native select, radio group, or checkbox group can satisfy the interaction.	The option set is short and comparison matters.	The list is short enough for native select, radio buttons, or segmented controls.	The set is short and independent choices should stay visible.
Required state	Empty or initial state with visible label and at least one option.	Closed state with empty option or current selected value.	Collapsed empty state with label, help text, and popup affordance.	No selected values state with empty selected set.
Accessibility burden	Use role listbox on the container and role option on every selectable item.	Prefer native semantics or implement equivalent name, role, state, and keyboard behavior.	Expose the value surface with role combobox or a native control that maps correctly to combobox semantics.	Expose selected state for options and labels for remove controls.
Common misuse	Using listbox when native select, radio buttons, or checkboxes would do the job with less risk.	Custom select with no keyboard support or hidden selected state.	Using a custom combobox for a short list where native select, radio buttons, or segmented controls would be simpler.	Hiding selected values inside a closed menu.

Listbox

UI or UX: UI + UX - Visible selectable option list
UI guidance: Render a labelled listbox container, visible options, active option styling, selected option state, optional grouped labels, empty or disabled states, and nearby help or error text.
UX guidance: Use a listbox when users benefit from seeing the available options while moving focus through the list and selecting one or more static values.
Good UI: A Role listbox has a visible label, five role options, one active row, one selected row, concise option names, and a status line explaining whether focus or selection changed.
Bad UI: Each option row contains nested Edit and Delete buttons, making the listbox a broken table of actions.
Good UX: A user arrows from Analyst to Support, hears the active option change, then presses Select active option to commit Support.
Bad UX: A high-stakes role assignment saves as soon as focus moves while the user is only exploring options.
Best fit: Users choose one option from a visible static list.
Avoid when: A native select, radio group, or checkbox group can satisfy the interaction.
Required state: Empty or initial state with visible label and at least one option.
Accessibility burden: Use role listbox on the container and role option on every selectable item.
Common misuse: Using listbox when native select, radio buttons, or checkboxes would do the job with less risk.

Select

UI or UX: UI + UX - Single-choice dropdown control
UI guidance: Render a persistent label, hint text, native closed value, finite option list, selected option, and validation state.
UX guidance: Help users choose one value from a moderate known list without showing every option permanently.
Good UI: Persistent label, hint text, visible selected value, readable options, and clear required validation state.
Bad UI: Placeholder as the only label.
Good UX: Users can open, scan, choose one value, and review the selected value after close.
Bad UX: Hiding two obvious critical choices in a dropdown.
Best fit: The user chooses one option from a moderate known list.
Avoid when: The option set is short and comparison matters.
Required state: Closed state with empty option or current selected value.
Accessibility burden: Prefer native semantics or implement equivalent name, role, state, and keyboard behavior.
Common misuse: Custom select with no keyboard support or hidden selected state.

Combobox

UI or UX: UI + UX - Single-value input widget with owned popup
UI guidance: Render a persistent label, editable or select-only value surface, popup indicator, collapsed and expanded states, option popup, active option, committed selection, clear action when supported, help text, and error text.
UX guidance: Use a combobox when users need one value from a large or dynamic option set and benefit from opening a popup, typing to narrow it, or copying/editing the displayed value.
Good UI: An Assignee combobox shows a label, typed text, disclosure button, active option in a listbox, selected-value status, and an error when typed text has no accepted option.
Bad UI: A custom dropdown displays matching labels but never exposes expanded state, active option, or the controlled popup.
Good UX: A user types Ada, moves the active option with Arrow Down, presses Enter to accept Ada Lovelace, then edits the label and sees the selected ID clear until a new option is accepted.
Bad UX: The component automatically commits the first match as soon as a user types one character.
Best fit: Users choose one value from a large, dynamic, or filterable option set.
Avoid when: The list is short enough for native select, radio buttons, or segmented controls.
Required state: Collapsed empty state with label, help text, and popup affordance.
Accessibility burden: Expose the value surface with role combobox or a native control that maps correctly to combobox semantics.
Common misuse: Using a custom combobox for a short list where native select, radio buttons, or segmented controls would be simpler.

Multi-select

UI or UX: UI + UX - Multi-value picker widget
UI guidance: Render a filter input, open option list, selected-value chips, remove controls, checked option states, clear-all control, and validation state.
UX guidance: Help users choose multiple values from a large, compact, or dynamic option set.
Good UI: Selected values are shown as removable chips or checked rows with clear labels.
Bad UI: Selected values hidden inside a closed dropdown.
Good UX: Users can search, add, remove, review, and submit multiple values without losing context.
Bad UX: Removing a value is impossible by keyboard.
Best fit: Users choose many values from a long predefined list.
Avoid when: The set is short and independent choices should stay visible.
Required state: No selected values state with empty selected set.
Accessibility burden: Expose selected state for options and labels for remove controls.
Common misuse: Hiding selected values inside a closed menu.

Decision rules

Prefer a listbox when the option set must remain visible and the core interaction is moving focus through options, selecting one option, and reviewing the selected row without opening a popup.
Prefer native select when one known value can be chosen from a compact closed control and the platform's built-in keyboard, focus, and mobile behavior are acceptable.
Prefer combobox when a value field controls a popup, users need to type or open suggestions from that field, and acceptance or cancellation is part of the contract.
Prefer multi-select when users need several selected values, selected chips or a selected-set summary, and repeated toggling without losing already chosen values.
Use a standalone listbox instead of radio buttons only when the list is long enough that roving focus, typeahead, scrolling, grouping, or compact row presentation is worth the custom interaction cost.
Do not put buttons, links, checkboxes, menus, or editable controls inside listbox options; use a grid, table, menu, checkbox group, or separate toolbar when rows need independent actions.
Keep active focus and selected state distinct unless the single-select listbox intentionally uses selection-follows-focus and the consequence of changing selection is lightweight.
Use typeahead and Home or End for longer listboxes so keyboard users can move quickly without listening through every repeated option prefix.
Avoid long repeated option names; split country, category, or parent labels into separate controls or groups when each option starts with the same words.
Use aria-selected or aria-checked consistently for option state; do not mix both meanings in the same listbox unless the interface exposes two genuinely separate states.

Inspect live examples

Listbox Select Combobox Multi-select

Failure modes

A listbox option contains nested Edit and Delete buttons, so assistive technology users cannot interact with the row actions.
Moving focus immediately saves a high-stakes selection even though the user was only exploring options.
All option names start with the same long prefix, forcing screen reader users to hear repeated text before the distinguishing word.
The visible active row changes but aria-activedescendant or DOM focus remains on a stale option.
A multi-select listbox omits aria-multiselectable and does not expose selected state on unselected options.
A closed native-select job is rebuilt as a custom listbox without matching platform keyboard and mobile behavior.