I use a dropdown menu with checkboxes to select multiple options for field.

I am not sure if I need a "validate" or "save" link, or if the user will understand that they just have to click outside the dropdown.

Which design should I use: method A or method B?


download bmml source – Wireframes created with Balsamiq Mockups

EDIT of November 26th : Many of you are wondering why I need checkboxes in a dropdown, it is because I need to select many functions for a same data in a small space.

enter image description here

  • 3
    not really answering, just wanted to ask why did you choose to use a dropdown with checkboxes instead of just using the checkboxes? was it a matter of space? thanks :) Commented Nov 22, 2013 at 19:22
  • I'd suggest a close [x] in the upper right.
    – DA01
    Commented Nov 22, 2013 at 22:50
  • Actually I work on a statistic tool and for each data listed, you have to choose which functions you want to display (min, max, average, cusum). I found this solution to not overload the screen
    – Renaud
    Commented Nov 25, 2013 at 8:40
  • @frntk that's exactly what I was wondering. Was about to comment that until I noticed your comment. This is weird to me too since a drop down's interaction is for a single selection, while check boxes is multiple selections. I'm intrigued to know the reason behind this!
    – UXerUIer
    Commented Nov 25, 2013 at 19:47
  • I updated the post to show how it works
    – Renaud
    Commented Nov 26, 2013 at 15:42

8 Answers 8


I choose A.

  • It's not really necessary to have a save button in my opinion, providing there is sufficient space to click outside of the drop-down. Don't forget to make selecting the ▾ button allow the drop-down to be closed when clicked if the drop-down is currently open.

  • Normal drop-downs will save the selection when clicked outside of them or keyboard navigation is used to select another element — this would simply be an extension of this by requiring such an action to exit the drop-down.

  • Real-time updating of the contents of the drop-down box itself is a much better option than waiting for a save button to be pressed.


The use of a validate/confirmation button is usually tied to whether or not the clicking of that button is required for the user's choices to take effect.

I would ask questions such as:

  1. Is the data being filtered by these options visible and changing live on this page? If so, the button would make zero sense.

    1b. Is the click of the button required in order for the user's selection to take effect? If so, would clicking outside the box, which also closes it also have the same effect of saving the data?

  2. Why is a drop down being used to begin with? Drop downs are typically not intuitive for multi-selection options.

    2a. Where you list "option 1, option 2" because two options are selected, what happens when 3 options are selected? Does the drop down become wider? If not, then the user cannot view all selected options and may think only 2 are selected. Where you say "option 1, option 2" when the drop down is closed, this is typically either the currently selected option, or a category of the available options if no option is selected.

    2b. Is the drop down being used simply because there is not enough space to view all the options all the time, or this might feel cluttered? If so, perhaps there is a similar way to hide/show the options, without a drop down. I would reccomend this, assuming you are not restricted by the use of a button to actually save the data and have the user's option take effect.


Deciding a category that each group of options falls into. Either: display this category name when all the options to select are not visible, OR reliably display all currently selected options. (i.e. showing only 1 and 2 when 1, 2, and 3 are selected is misleading).

When deciding if you should use a 'validate' or 'save' button, consider if this extra click is necessary for task completion. Keep number of necessary clicks low.

  • I agree that the button is not necessary. the data are refreshed lively. But a dropdown menu use to close itself when you select an option and maybe the user will not know where to click once the selection is done
    – Renaud
    Commented Nov 25, 2013 at 8:45

I'm guessing the drop-down isn't open by default, but instead opened in response to a user action and thus you could assume the user will likely understand they can just tab out or click off to close it again.

Of course assumptions being what they are, you shouldn't leave it at that. If there are any problems or issues with this field-control it would quickly be made apparent when you do the usual usability testing later.

You will be doing usability testing, right?

  • Thank you Erics, i agree with your point. Of course this will be tested with real users. i will let you know the conclusion
    – Renaud
    Commented Nov 25, 2013 at 8:51

B is the better option of the two. Still, it might be better to simply include the button, but do not require its use: Thus, a combination of A and B. Your web analytics should show whether users are clicking the button or not (and it can be removed at a later stage).

However, I suggest instead a multiple-select drop-down menu. This form element has been in use for many years and some users will be familiar with this convention.

  • 1
    I presume you're referring to <select multiple> elements, which I personally detest due to the fact that accidentally clicking without holding ⌘/ctrl deselects all my selections except the one I clicked. Also, can you expand on your reasons for selecting B as the better option?
    – grg
    Commented Nov 22, 2013 at 17:01
  • I agree: multiple-selection does not work well at all. The solution you propose above is definitely a legitimate way to deal with the shortcomings. However, whenever replacing a convention, it is important to balance the learning curve with the strength of the convention.
    – MXMLLN
    Commented Nov 22, 2013 at 22:29

Out of these 2 option is better. But i would suggest you to use some "Validate" or "Continue" button because it'll acknowledge the user better. The user will surely understand its purpose i.e. To click it in order to submit selected options and continue.


I choose option A.

Drop downs and check box are the most primitive building blocks we have. Hence, we can axiomatically assume the user knows how to use them. I see no other choice, though it is a combined controller here, made of both.


maybe you can use two selects with the multiline property and move items from one box to the other ... comboboxes with checkboxes are hard to use, and validate.

  • 2
    Hi @Erik Bij de Vaate, can you elaborate a bit why comboboxes with checkboxes are not a good option? IMHO there are out-of-the-box solutions available that work fine, e.g. labs.abeautifulsite.net/archived/jquery-multiSelect/demo - but I might be wrong. Commented Nov 25, 2013 at 15:13
  • well if you stick to web standards, comboboxes will never hold a checkbox... I am well aware that there are hacky solutions for this, but in my opinion you are breaking with web and usability standards then Commented Sep 28, 2018 at 14:17

(Okay, i wanted to REPLY to MXMLLN, but i can't because i don't have 50 reputation).

I had a similar problem for selecting 1 or more items from a pretty long list. I went with a different "multiple-select drop-down menu" from "Select2"

See here in the demo (2nd in the list called "Multi-value select box")

It's basically, a search & combobox in one, and you don't force clicking upon the user.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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