2

Let's say we have six options, six check boxes. The user must select three options to proceed, no more and no less. What happens when the user tries to select a fourth option? Should it even be possible? Should the non selected check boxes be disabled when three options has been selected? Or should the first selected one be deselected automatically when the user tries to select the fourth one?

Or is there a third or fourth alternative?

enter image description here

  • The compulsion is to only select 3 options and no more than 3. Right? – Sheraz May 21 '18 at 7:24
  • Yes, sorry. I added a clarification to the question. – efrethe May 21 '18 at 8:36
  • There was very similar question with many answers proposed, Here is link to my answer. – Serg May 21 '18 at 9:27
  • You could let them check any number of checkboxes, but only allow them to submit if they have exactly three checkboxes. You could also have something like "check one more box" or "uncheck two boxes" to tell them how to get to a valid state. – PyRulez Jan 22 at 22:43
5

The solution is pretty simple.

When someone completes checking three checkboxes, disable all non-selected checkboxes. If someone clicks on a disabled checkbox, show an alert to the user that already 3 options are selected.

However, you can make the design more intuitive by having some progress element.

This is the state when the user has checked only two options. The submit button is disabled, checkboxes are active, progressbar is incomplete

This is the state when the user has checked only two options. The submit button is disabled, checkboxes are active, progressbar is incomplete

User has checked three options. So button is enabled, other checkboxes are disabled and pro

User has checked three options. So button is enabled, other checkboxes are disabled and progressbar shows completed

  • But in this case, what if the user did select a wrong option and want to uncheck and check another option. Now he/she has no option to correct this and is restricted to filling it wrong. – Srija Nair May 21 '18 at 9:16
  • 1
    Why not ? Unchecking a selected checkbox will again active all checkboxes. Then the user can check any other checkboxes. – UXPAPA May 21 '18 at 10:00
  • @SrijaNair My first thought was that once three have been selected, the others shouldn't be disabled, because having to deselect the wrong option first before selecting the correct one is "fiddly", but then I realised that if you allowed selecting the correct option (making four selections) the software couldn't automatically deselect an option (because it wouldn't know which is wrong) so the user would still have to deselect it manually. Therefore, they may as well deselect it first (with the benefit of positive acknowledgement when the correct number have been selected). – TripeHound May 21 '18 at 10:17
  • @UXPAPA Yeah, this is a good idea. Can show a popover if the user tries to check any disable checkbox "to uncheck one option to select another option also user is only allowed to select 3 options." Although you have already shown it in a progress bar still I guess its a good idea. – Srija Nair May 21 '18 at 10:24
  • @TripeHound You are right. My concern was how will the person select the other option if he has already chosen 3 options. Now UXPAPA made it clear that one can uncheck the checked option make all the option active again to check. – Srija Nair May 21 '18 at 10:30

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.