Use a listbox when options should stay visible as a selectable list with managed focus and selected state; use select for native compact single choice, combobox for a field-owned popup, and multi-select for compact long-list selection with a reviewable selected set.
Use a listbox when options should stay visible as a selectable list with managed focus and selected state; use select for native compact single choice, combobox for a field-owned popup, and multi-select for compact long-list selection with a reviewable selected set.
Practice the judgment: Imagine this situation: Moving focus immediately saves a high-stakes selection even though the user was only exploring options. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| 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 the person reach a clear task outcome. | 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. | A Department field opens a list of matching departments, keeps focus in the field while the active option moves, and clearly marks the committed department. | 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 visible assignee name changes after typing while an old hidden user ID remains selected for form submission. | 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. | Selection limits and duplicates are handled before submit. |
| 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. | Open filtered option list state. |
| 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. | Using select to hide two or three obvious choices that should be compared. | 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. |