Get the course! 15h video + UX training

Get the course! 15h video + UX training
6 min read

Combobox vs. Multiselect vs. Listbox

Combobox vs. Multi-Select vs. Listbox vs. Dual Listbox? How they are different, what purpose they serve and how to choose the right one.

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.

A comparison of UI elements: Listbox, Combobox, Multiselect, and Dual Listbox, showcasing different selection functionalities.

And the confusion begins: Listbox, Combobox, Multiselect, Dual Listbox.

Not All List Patterns Are The Same #

All the UI components highlighted above have exactly one thing in common — they support user's 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.
Watson design system with grouping inside of its combobox pattern.

Watson design system with grouping inside of its combobox pattern.

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.

A dropdown menu showing product selection. Compass is selected, and Atlas is selected with two sub-options: Vector Search and Atlas CLI.

MongoDB design system with nested filters and chips.

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).

Matrix of options for multiselect and listboxes.

A matrix of options, broken down by single- or multi-selection and static or scrollable view. By Anna Kaley, from NN/g.

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 list box used to transfer items from one place to another.

Dual listbox in action: it can be very helpful when assigning tasks or permissions. That's why it's "Transfer List". Example from Mantine.

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 upon keyboard to select options once they start typing.

Keyboard navigation often in use with any type of lists.

Keyboard navigation is often in use with any kind of lists. Example: Watson.

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.

Useful Resources #

Related articles