Examples / best practices for dropdown menus with checkboxes

  • 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?)

    What are you looking for if the Gmail labels menu is a good example?

    @Lode I'm looking for more examples :). Maybe different approaches, maybe more complicated relationships between the items - e.g. the possibility of selecting "all".

  • Phil

    Phil Correct answer

    10 years ago

    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.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM