I have a drop down checkbox where there are 8 items to check. Two are selected by default.

I am trying to think of an intuitive way to let the user know they have to deselect the existing ones before checking another, and that they have to have exactly two checked (no more, no less).

I think I am happy to use JavaScript to help, perhaps some sort of tool-tip or notification. Any ideas? I'm open to alternative options other than a drop down checkbox too.

  • 3
    What will be the context for current drop down? if you add the context it will help us to answer the alternative options as well as to understand more about current scenario – Andy Dec 11 '13 at 10:38

I'd suggest putting a button that they have to press to complete the selection, and using that button's label text and active/disabled state to transmit the information you want to pass to the user.

Something like this:


download bmml source – Wireframes created with Balsamiq Mockups

The idea is that the combination of the selected options and the text in the button makes it clear to the user what they need to do to proceed.

  • Nice idea, however I think the user should be able to select 2 as a maximum, not exactly 2 (from the question: "they can only check a max of 2") I think this approach could still work well with a suitable tweak for this requirement though. – JonW Dec 11 '13 at 13:34
  • Serves me right for not reading the requirements thoroughly. The obvious fix is just to make the button in the middle version active (and green). – Racheet Dec 11 '13 at 14:11
  • Ahh actually I got the requirements from the title which says that "2 and only 2 options must be selected" – Racheet Dec 11 '13 at 14:22
  • Yeah I didn't notice the question body myself at first. I've added a comment to it to ask for some clarification. – JonW Dec 11 '13 at 14:49
  • No 2 are required, not just as a maximum, but required. It must be at least 2 and at most 2. This is a really good idea, except, with the defaults selected, we still need the user to know that they have to deselect some of the default selections. – Source Dec 11 '13 at 20:00


download bmml source – Wireframes created with Balsamiq Mockups

You can go to a two Combo interface. The first one with all the choices, and the second one with all the choices and an empty field.

  • That would be an easy idea, but isnt going to look right. Perhaps I could do it like that in a drop down div though. – Source Dec 11 '13 at 20:01
  • 3
    I like this approach. Be sure to take out the selected option in Choice 1 from the Choice 2 list once Choice 1 is made though. – Graham Dec 11 '13 at 20:59
  • @Graham Or do a check to ensure the selected values are not the same – Grant Palin Dec 16 '13 at 23:31
  • Dropdown lists are one of the most uncomfortable controls, let alone when there's only 8 options (as the OP says). Joel's criticism still holds: joelonsoftware.com/uibook/chapters/fog0000000063.html – Konrad Morawski Dec 18 '13 at 9:49

Just use some kind of alert message, really. It is fine. I don't see a need to use a different interface solution as you have only 8 options and need to select just 2 of them. Also, the checkboxes represents well enough what the users need to do, which is to select multiple options.

Take a look at the image below, if a user tries to choose more than two options (like "Sleep"), show a message. Let the user explore your interface and learn its limits, they can, and you already did a good job using standard and well-known components which they know how to use.
enter image description here

  • 2
    If the Sleep (and other currently not-selected checkboxes) are not available, then why are they enabled? I would disable the not available options in such a UI. – André Dec 17 '13 at 12:07
  • @André I agree, that would be nice to do. As the two options are already checked, everything else is disabled. As soon as the user uncheck something, every other checkbox becomes enabled again. The message can appears when the cursos goes over the checkboxes. I'm not sure what solution would perform better, but I definitely like your idea. – pcattai Dec 19 '13 at 0:02

I think the best solution is multiselect dropdown list like this sample - Chosen. You can limit number of possible selections and warn user if he try to make extra selection or disable all items in list. But he will be able easily delete previously made selection to make new one.

enter image description here

  • 1
    combine this with Racheet's use of dynamic button labeling and you got a winner – hubson bropa Dec 12 '13 at 22:27
  • I wouldn't use a dropdown list unless I had no choice. A regular listbox is much better. There's only 8 options in this case, why would you want a dropdown. joelonsoftware.com/uibook/chapters/fog0000000063.html – Konrad Morawski Dec 18 '13 at 9:54
  • @Morawski I agree with you but also I think that we have no incorrect answers here - they all will work, so the main task is to choose more suitable for particular situation. As for me I like this control because it has more compact size than listbox as well as it's pretty informative. – Serg Dec 18 '13 at 11:12
  • @Serg - the more compact size is precisely the problem in my opinion. Saving on space (at the cost of convenience and forcing one to do more clicking) should come from a specific need, and not be a default choice. – Konrad Morawski Dec 18 '13 at 11:34
  • @KonradMorawski I agree - this is no ideal solution. As Andy said in comment to this question we need more about scenario. – Serg Dec 18 '13 at 11:40


download bmml source – Wireframes created with Balsamiq Mockups

Present the person with a list of options, and a list of visible placeholders for their choices. When they click an option on either side, it should disappear from that side and reappear on the other.

Once two choices have been made, let the user progress.

  • 1
    I like it. A good thing about it is that - unlike eg. @pcattai's answer - it allows for explicitly overriding one of your choices. I mean, once you've already selected both options, you don't need to unselect anything prior to selecting another one. Because this UI inherently "knows" which of your previous choices you want to replace. – Konrad Morawski Dec 18 '13 at 9:52
  • how would keyboard selection work here? Arrow keys & Space/Enter? – Vijay Dec 19 '13 at 4:51
  • @Vijay That seems the most intuitive way to deal with it. Left/right to hop between lists, up/down to change selection within the list, and space/enter to shift the current selection to the other side (if there's room). – doppelgreener Dec 19 '13 at 4:52
  • Thanks. I like your answer more as the visual cue is quite clear and immediate, no text parsing needed. However, how would you handle 1 or more upto 3 case? 3 dotted boxes, and then? – Vijay Dec 19 '13 at 4:56
  • @Vijay As many placeholders as necessary. For only 1 selection this pattern wouldn't even be necessary as you can just make a normal single selection. This may begin to break down for larger sets, but this is only designed for 2. – doppelgreener Dec 19 '13 at 4:58

Another alternative could be to do something sometimes seen in software applications, where items from one column can be selected to move into the other column, and the reverse. There could be a validation check for how many items are already in the second column, if any.


download bmml source – Wireframes created with Balsamiq Mockups

It's not obvious in the image, but it can be possible to select multiple items in either list for moving, rather than having to do them one by one. Though for the criteria - two exactly - it may not be much of an issue. Another note is that it's possible to double-click an item to move it from one list to the other, which also reduces moving and clicking.

  • Sorry but it feels clunky and very 1990s to me. It's not particularly comfortable. Note that if you selected "Item 3" and "Item 4", but realize that you actually want to select "Item 3" and "Item 2", you need to: a) click "Item 4" on the right list; b) click the <-- button c) click "Item 2" on the left list d) click the --> button. That's 4 clicks. Not a smooth experience. Compare it with ux.stackexchange.com/a/49127/10579 (my favorite) - just 1 click, drag and drop "Item 2" from the left onto "Item 4" on the right. – Konrad Morawski Dec 18 '13 at 9:58
  • @KonradMorawski You're not wrong with the issue you point out. I added some notes to my response which can enhance the usability of the solution. No it's not pretty, but I see it come up occasionally and it is functional. – Grant Palin Dec 19 '13 at 2:48
  • I am guilty of using this construct! :). It's similar to jonathon's answer and it's the best use of a common construct. – Vijay Dec 19 '13 at 5:14

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.