How to Choose the Right One – Smashing Magazine

So what is the difference between combo box, multi-select, list box and drop-down menu? While all of these UI components may look similar, they serve different purposes. The choice often comes down to number of options available and its visibility.

Let’s see how they differ what are they forand how to choose the right one, avoiding misunderstandings and wrong expectations along the way.

Not all list patterns are the same

All of the UI components highlighted above have exactly one thing in common: they support user interactions with lists. However, they do it slightly differently.

Let’s take a look at each one, one by one:

• Dropdown menu → the list is hidden until activated.
• combo box → type to filter + select 1 option.
• Multiple selection → type to filter + select many options.
• List box → all list options visible by default (+scroll).
• Dual List Box → move items between 2 list boxes.

In other words, combo box combines a text entry field with a drop-down list, so users can type to filter and select a single option. With Multiple selectionUsers can select from many options (often displayed as pills or chips).

List boxes show all list options visible by default, often with scrolling. It is useful when users need to see all available options at once. Dual List Box (also called transfer list) is a variation of a list box that allows users move items between two list boxes (left ↔ right), usually for mass selection.

Never hide frequently used options

As mentioned above, choosing the right UI component depends on 2 factors– How many list options are available and whether all of these options should be visible by default. All lists can also have tree structures, nesting, and group selection.

There is a principle that I have followed for years for any UI component: never hide frequently used options. If users frequently trust a particular selection, there is little value in hiding it from them.

we could do it preselectedor (if there are only 2 or 3 frequently used options) display them as chips or buttonsand then show the rest of the list about interaction. In general, it’s a good idea to always display popular options, even if they may clutter the user interface.

How to choose which one?

Not all lists need a complex selection method. For lists with less than 5 articlesSimple radio buttons or checkboxes often work best. But if users need to select between a big list of options (e.g. 200+ items), combo box + multiple selection are useful because filtering is faster (e.g. country selection).

List boxes They are useful when people need to access many options at onceespecially if they also need to choose many options from that list. They could be useful for frequently used filters.

Dual List Box It is often overlooked and ignored. But it can be very useful for complex tasks, for example, mass selection or assignment of roles, tasks and responsibilities. It is the only UI component that allows users to review their entire pick list along with the source list before committing (also called “Transfer List”).

In fact, the dual list box is usually 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 support keyboard navigation (e.g. ↑/↓ arrow keys) for accessibility. Some people will almost always rely on the keyboard to select options once they start typing.

Beyond that:

• For lists with 7+ optionsConsider adding “Select All” and “Clear All” functionality to streamline user interaction.
• For long lists with a combo box, expose all options to users when clicking/tapping, as otherwise they would never be seen,
• The most important thing, don’t show non-interactive elements like buttons to avoid confusion and do not display interactive elements as static labels.

Conclusion: not everything is a dropdown menu

Names matter. TO vertical list of options It is usually described as a “drop-down menu”, but is often too generic to be meaningful. “Dropdown” suggests that the list is hidden by default. “Multiple selection” involves multiple selection (checkbox) within a list. “Combined table” involves text entry. And “Listbox” is simply a list of selectable items, visible at all times.

The goal is not to be consistent with the above definitions just for the sake of it. but rather to align intentions – speak the same language when deciding, designing, building and then using these UI components.

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

Learn about “Design Patterns for AI Interfaces”

Meet Design Patterns for AI InterfacesVitaly’s new one video course with practical examples of real-life products, with a live UX training happening soon. Skip to free preview.

Useful resources

• Autocomplete: UX Guidelinesby Vitaly Friedman
• combo boxby eBay 👍
• combo boxby elastic
• combo boxby Elisa
• combo boxby MongoDB 👍
• combo boxby Visa 👍
• combo boxby Watson (Docplanner)
• combo boxby Wikimedia
• combo boxby Zendesk
• Multiple Select (MongoDB Combo Box Design Docs)by MongoDB 👍
• Multi-selection searchby Wikimedia
• Multiple Select Combo Boxby Vaadin
• Multiple selectionby Visa
• Transfer (list box example)by Ant Design
• List boxper hopper
• List boxby Vaadin
• List boxby Visa
• Dual List Selectorby Red Hat (PatternFly)
• Dual List Boxby Salesforce (Lightning Design System)
• Transfer listby Mantine
• Dual List Boxby Dashlite
• Badges vs. pills vs. chips vs. tagsby Vitaly Friedman
• List Boxes vs. Dropdown Listsby Anna Kaley (NN/g)