So what is the difference between combobox, multiselect, listbox and dropdown? Although all these UI components look similar, they serve different purposes. The choice often comes down to the number of options available and their visibility.
Let’s see how they differ, what purpose they serveand 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 it slightly differently.
Let’s look at them all one by one:
- Dropdown menu → list is hidden until activated.
- Combo box → type to filter + select 1 option.
- Multiselect → type to filter + select many options.
- Selection list → all list options are visible by default (+ scroll).
- Double selection list → move items between 2 drop-down lists.
In other words, Combo box combines a text input field with a drop-down list, allowing users to do that type to filter and select one option. Of Multiselectusers can select many options (often represented as pills or chips).
List boxes display all list options visible standard, often with scrolling. It’s useful when users need to see all available choices immediately. Double selection list (also called transfer list) is a variation of a drop-down list that allows users to do this move items between two list boxes (left ↔ right), usually for bulk selection.
Never hide commonly used options
As mentioned above, choosing the right UI component depends on 2 factors: How many list options are available and whether all these options should be visible by default. All lists can also contain tree structures, nesting and group selection.
There’s one principle I’ve followed for years for every UI component: never hide commonly used options. If users often rely on a particular selection, there is little point in hiding it from them.
We could both make it preselectedor (if there are only 2-3 common options) show them as chips or buttonsand then show the rest of the list about interaction. In general, it’s a good idea to always show popular options, even if it clutters the user interface.
How do you choose which one?
Not every list needs a complex selection method. For lists with less than 5 itemssimple radio buttons or check boxes usually work best. But if users have to choose from a big list of options (e.g. more than 200 items), combobox + multiselect are useful because of the faster filtering (e.g. country selection).
List boxes are useful when people need access many options at onceespecially if they also have to choose many options from that list. They can be useful for commonly used filters.
Double selection list is often overlooked and ignored. But it can be very useful for complex tasks, for example bulk selection or assigning roles, tasks and responsibilities. It is the only UI component that allows users to view their entire selection list in addition to the source list before making a commit (aka “Transfer List”).
In fact, a duplicate listbox is often faster, more accurate, and more accessible than drag and drop.
Usability considerations
An important note to keep in mind is that all list types must have support keyboard navigation (e.g. ↑/↓ arrow keys) for accessibility. Some people almost always rely on the keyboard to select options once they start typing.
Furthermore:
- For lists with 7+ optionsconsider adding “Select All” and “Clear All” functionalities to streamline user interaction.
- For long lists with a combo box: expose all options for users who click/tap, otherwise they may never be seen,
- Most importantly, 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 are important. A vertical list of options is typically described as a “drop-down list” – but often it’s a bit too general to make sense. “Dropdown” indicates that the list is hidden by default. “Multi-select” implies multiple selection (checkbox) within a list. “Combo box” involves text input. And “Listbox” is simply a list of selectable items, always visible.
The goal is not to be consistent with the above definitions for the sake of it. But rather to aligning intentions — speaking the same language when deciding, 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 interfacesVitaly is new video course with practical examples from real-life products — with a live UX training happening soon. Go to a free sample.
Useful resources
- Autocomplete: UX guidelinesby Vitaly Friedman
- Combo boxvia eBay 👍
- Combo boxfrom Elastic
- Combo boxby Elisha
- Combo boxby MongoDB 👍
- Combo boxvia Visa 👍
- Combo boxby Watson (Docplanner)
- Combo boxby Wikimedia
- Combo boxfrom Zendesk
- Multiselect (MongoDB Combobox design documents)by MongoDB 👍
- Multiselect lookupby Wikimedia
- Combination box with multiple selectionsVatin
- Multiselectby Visa
- Transfer (Listbox example)from Ant Design
- Selection listfrom Hopper
- Selection listVatin
- Selection listby Visa
- Double list selectorby Red Hat (PatternFly)
- Double selection listby Salesforce (Lightning Design System)
- Transfer listby Mantine
- Double selection listfrom Dashlite
- Badges vs. pills vs. chips vs. tagsby Vitaly Friedman
- List boxes vs drop down listsby Anna Kaley (NN/g)
(yk)
#Combobox #Multiselect #Listbox #Choose #Smashing #Magazine