I'm looking for websites with good examples of a dropdown with checkboxes. I know that the gmail labels menu is one, but I'd like to see some more. General best practices are also very welcome.

Is there a good way to show the selected values on the outside? Is SHIFT ever used for continuous selection within the dropdown? Are there any other ways to provide continuous selection?

The gmail dropdown has a curious feature - when you click on the checkbox itself, it becomes selected, and the menu stays open, so as to allow the selection of additional values. But when you click on the label, and not on the checkbox itself, the checkbox becomes selected and the menu collapses. I find it mostly confusing. Pros and cons? Why not always leave it open and collapse it on loss of focus and on click on the dropdown itself?

EDIT I'll rephrase the question. The one good example of a dropdown with checkboxes that comes to mind is the Gmail labels menu. Do you know of any others that you like (in web apps?)

  • 1
    What are you looking for if the Gmail labels menu is a good example? – Lode Apr 2 '11 at 20:41
  • @Lode I'm looking for more examples :). Maybe different approaches, maybe more complicated relationships between the items - e.g. the possibility of selecting "all". – Vitaly Mijiritsky Apr 3 '11 at 5:35

Here's an example on a live website: http://www.omegawatches.com/watchfinder (e.g. "features" dropdown)

I'm not sure how well this works, we could never test it unfortunately.

  • I like the 'Cancel' and 'Done' features. I think they give the user extra control and also add predictability to how the control is going to work when I select an option. – ArchieVersace Apr 4 '11 at 13:48

This has become a common request in many web application. To specify multiple values from a predefined list. In my opinion multi-select dropdown is not the best solution. Although it is compact it does not visually represent the values selected.

In my opinion Google docs search bar provides a very neat solution. However, I do admit that it is targeted at rather advanced users.

Here's an example with "check all" and "uncheck all".

enter image description here

  • Thanks @Denzo! Is that a website that everyone can see? – Vitaly Mijiritsky Apr 6 '11 at 15:31
  • It is from www.teamer.net which requires a registration. It is free though. – Denzo Apr 7 '11 at 0:25

I don't have any examples to link you to, but the HTML default implementation is that a simple click de-selects everything except for the item you just clicked on, a CTRL+Click selects (or de-selects) an item without de-selecting previously chosen items, and SHIFT+Click is used for choosing a range, selecting everything from the nearest selected item to the item you just clicked on. All that to say yes, SHIFT+Click and CTRL+Click are sometimes used in multi-select implementations.


StackOverflow has a post with two links to examples: https://stackoverflow.com/questions/4918995/combobox-with-checklist-c

Personally I think they are not that great for usage. A good use case for multi-select or combo boxes with lists would appear to be huge ecommerce store filtering, but ebay and amazon don't appear to use any such method.

If you absolutely must have one - what about representing it a different way like this: http://odyniec.net/projects/selectlist/examples.html

For an extreme example - click on tags - http://www.codeproject.com/info/search.aspx

While that's clearly a case of a developer without a designer - the concept does allow for mass filtering very quickly.

  • Thanks! The tags example is actually very powerful. As to the examples at odyniec.net - they require you to open the dropdown and search for your items again after every selection, which is something I'm trying to avoid. – Vitaly Mijiritsky Apr 6 '11 at 15:39

I use the following control in an email performance report. There is a filter tool for people, but this allows the user to trim the list of emails included in the report. The tree matches their tree in another section of the app, where they make emails.

It isn't the end-all-be-all, but users find it fairly obvious in usage.

Checkbox Tree in Menu

  • 1
    Uh, horizontal scrolling in a dropdown and cancel button on the wrong side. I guess users understand it, but it doesn't look very usable or elegant to me. – Phil Apr 6 '11 at 5:46
  • Cool! Can you tell me how the search works? Does it filter or jump to the first result? – Vitaly Mijiritsky Apr 6 '11 at 15:41
  • Vitaly, It does a dynamic (as you type) filter of the tree. It uses a built-in function of the Sencha ExtJS tree control. Phil, Windows often puts the cancel on the right. I know the debate about it, but it's not universally better one way or the other. – Glen Lipka Apr 6 '11 at 16:21

Years ago we built vacanceselect.nl, a Dutch car travel website.

In the big search widget immediately visible upon loading the page, click on "bestemming en accommodatie", which will open up an accordeon panel containing multiple checkboxes. These function similarly to your proposed multi-dropdown-checkbox in the sense that they're initially hidden until made visible by user interaction and they can be checked on and off at will. An important feature of the entire search widget is that the number of results dynamically updates as you click around the widget (this was not as fun to build as it was to invent).

Instant feedback on this thing is important. Without it you'd have to keep going back and forth, opening and closing the panel to turn things on and off. Instead, you can open each panel, tweak accordingly until the number of results looks like something you want, and then move on. We've heard from the client that users of the site are very happy with how it works and conversion is great (we never got a chance to do studies ourselves).

Hope that helps!


Maybe interesting

check out my answer (at the bottom) of the link. Can maybe guide you into some custom control design.


In general, it really isn't a good idea to do a multi-select dropdown. Multi-select is pretty confusing to users as it is, and adding in the added confusion of having it function in a dropdown can only make matters worse.

  • Charles, I don't think that a properly done multi-select is confusing - i.e. one that has checkboxes. The tricky bit is combining it with the dropdown. I think that the Gmail folk did a good job overall. – Vitaly Mijiritsky Feb 28 '11 at 19:14
  • @Vitaly - Using checkboxes is not a multi-select - it is checkboxes. Multi-select has a very specific meaning. – Charles Boyung Feb 28 '11 at 20:43
  • Ok, maybe I didn't phrase it in the best way. I updated the question, thanks. – Vitaly Mijiritsky Feb 28 '11 at 21:03

One ready-made component for jQuery I've used is Dropdown-check-list.

It basically transforms a regular <select> element into a dropdown box with either checkboxes or radio buttons. The component has versatile configuration options to create various behavours, so one can choose whether to close after each select, how to display selections, shift usage, etc.

The project also has a live demo page where you can try out some example settings.

  • Thanks @Jawa! But I'm looking more for examples in the context of a "real" website, and not so much for stand-alone components. – Vitaly Mijiritsky Mar 27 '11 at 21:16

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