We have a dropdown list that allows for the selection of up to 24 city names.

I'm trying to make the case to change that into a combo-box, which would drop down to a suggested top 10 elements, and allow users to type a few letters in order to get a more accurate suggestion. It would also allow us to add an infinite amount of city names, a feature that would be nice for later.

Some people in my team worry that this may confuse users, and that it adds the need to interact with the keyboard when the dropdown way allows interaction with just the pointer.

Are there clear guidelines on when to use which ?

  • Just checking to see if this has a mobile use-case, as the point that they are making about interactions with the mouse pointer would result in a different behaviour on a mobile phone for example. Many combo-box implementations provide some help/hint text and appropriate interactions to guide the user, so it comes down to the combination of design considerations you are trying to balance. Generally dropdowns lose their value when the number of items are too high or will grow in the future. – Michael Lai Apr 6 '17 at 0:24
  • Also, usually dropdowns on desktops will scroll if you type the first few letters. And, its possible to use a combobox without the keyboard (assuming you make it default to include all values). – JanErikGunnar Apr 7 '17 at 1:02

This is what I use when there are more that 20 elements in a drop-down list:

country combo box

A combo-box allows:

  • type the selection
  • type part of the selection and narrow the results
  • select an option from the list

Data to populate the list may come from a database, so you may have unlimited entries to the list and the user won't get lost and tired of browsing the list.

The user have plenty of options and any of them will allow to select the option.

EDIT: As you specifically requested guidelines, here are some:

VMWare Drop-Down Menus and Combo Boxes

Windows Dev Center Drop-down Lists & Combo Boxes

EDIT (another): The combo box may be used to select one or multiple items from the list:

Multiple selection combo box

  • How does this help in selecting up to 24 cities? This looks like a single select element. – Majo0od Apr 7 '17 at 14:52
  • No, it isn't. It's a multi select. I'll add a picture. – roetnig Apr 10 '17 at 6:14

A Combo-box is combination of selectbox and text-field, In this case user can either select a city or search and select a city.

A Dropdown button is a menu button, the list items in the menu button has a unique features, either the list items opens a dialog/tab or have some actions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.