So what’s the difference between combobox, multiselect, listbox, and dropdown? While all these UI components might appear similar, they serve different purposes. The choice often comes down to the number of available options and their visibility.
Let’s see how they differ, what purpose they serve, and how to choose the right one — avoiding misunderstandings and wrong expectations along the way.
Not All List Patterns Are The Same
All the UI components highlighted above have exactly one thing in common: they support users’ interactions with lists. However, they do so slightly differently.
Let’s take a look at each, one by one:
- Dropdown → list is hidden until it’s triggered.
- Combobox → type to filter + select 1 option.
- Multiselect → type to filter + select many options.
- Listbox → all list options visible by default (+ scroll).
- Dual listbox → move items between 2 listboxes.
In other words, Combobox combines a text input field with a dropdown list, so users can type to filter and select a single option. With Multiselect, users can select many options (often displayed as pills or chips).
Listboxes display all list options visible by default, often with scrolling. It’s helpful when users need to see all available choices immediately. Dual listbox (also called transfer list) is a variation of a listbox that allows users to move items between two listboxes (left ↔ right), typically for bulk selection.
Never Hide Frequently Used Options
As mentioned above, the choice of the right UI component depends on 2 factors: how many list options are available, and if all these options need to be visible by default. All lists could have tree structures, nesting, and group selection, too.
There is one principle that I’ve been following for years for any UI component: never hide frequently used options. If users rely on a particular selection frequently, there is very little value in hiding it from them.
We could either make it pre-selected, or (if there are only 2–3 frequently used options) show them as chips or buttons, and then show the rest of the list on interaction. In general, it’s a good idea to always display popular options — even if it might clutter the UI.
How To Choose Which?
Not every list needs a complex selection method. For lists with fewer than 5 items, simple radio buttons or checkboxes usually work best. But if users need to select from a large list of options (e.g., 200+ items), combobox + multiselect are helpful because of the faster filtering (e.g., country selection).
Listboxes are helpful when people need to access many options at once, especially if they need to choose many options from that list as well. They could be helpful for frequently used filters.
Dual listbox is often overlooked and ignored. But it can be very helpful for complex tasks, e..g bulk selection, or assigning roles, tasks, responsibilities. It’s the only UI component that allows users to review their full selection list side-by-side with the source list before committing (also called “Transfer list”).
In fact, dual listbox is often faster, more accurate, and more accessible than drag-and-drop.
Usability Considerations
One important note to keep in mind is that all list types need to support keyboard navigation (e.g., ↑/↓ arrow keys) for accessibility. Some people will almost always rely uponthe keyboard to select options once they start typing.
Beyond that:
- For lists with 7+ options, consider adding “Select All” and “Clear All” functionalities to streamline user interaction.
- For lengthy lists with a combobox, expose all options to users on click/tap, as otherwise they might never be seen,
- Most important, don’t display non-interactive elements as buttons to avoid confusion — and don’t display interactive elements as static labels.
Wrapping Up: Not Everything Is A Dropdown
Names matter. A vertical list of options is typically described as a “dropdown” — but often it’s a bit too generic to be meaningful. “Dropdown” hints that the list is hidden by default. “Multiselect” implies multi-selection (checkbox) within a list. “Combobox” implies text input. And “Listbox” is simply a list of selectable items, visible at all times.
The goal isn’t to be consistent with the definitions above for the sake of it. But rather to align intentions — speak the same language when deciding on, designing, building, and then using these UI components.
It should work for everyone — designers, engineers, and end users — as long as static labels don’t look like interactive buttons, and radio buttons don’t act like checkboxes.
Meet “Design Patterns For AI Interfaces”
Meet Design Patterns For AI Interfaces, Vitaly’s new video course with practical examples from real-life products — with a live UX training happening soon. Jump to a free preview.
Useful Resources
- Autocomplete: UX Guidelines, by Vitaly Friedman
- Combobox, by eBay 👍
- Combobox, by Elastic
- Combobox, by Elisa
- Combobox, by MongoDB 👍
- Combobox, by Visa 👍
- Combobox, by Watson (Docplanner)
- Combobox, by Wikimedia
- Combobox, by Zendesk
- Multiselect (MongoDB Combobox Design Docs), by MongoDB 👍
- Multiselect Lookup, by Wikimedia
- Multi-select Combo Box, by Vaadin
- Multiselect, by Visa
- Transfer (Listbox example), by Ant Design
- Listbox, by Hopper
- List Box, by Vaadin
- Listbox, by Visa
- Dual List Selector, by Red Hat (PatternFly)
- Dual Listbox, by Salesforce (Lightning Design System)
- Transfer List, by Mantine
- Dual Listbox, by Dashlite
- Badges vs. Pills vs. Chips vs. Tags, by Vitaly Friedman
- Listboxes vs. Dropdown Lists, by Anna Kaley (NN/g)
(yk)
