I have series of options that I currently render as checkboxes. However, the options themselves "stack" in the sense that selecting one, should auto-select all the options below it.

ex. If we have the following 3 options:

  • opt1
  • opt2
  • opt3

User selection ==> result

  • opt3 ==> opt3
  • opt2 ==> opt2, opt3
  • opt1 ==> opt1, opt2, opt3

The challenge is that some other, previously selected configurations determine whether or not you can select specific options, which has been a serious source of confusion.

If anyone has any ideas of examples of design patterns that would make this a more intuitive experience, I'd really appreciate the feedback!

2 Answers 2


If we rotate your selection => results list and do a little re-ordering, we get something like this:

opt3                        opt3  opt3  opt3 
opt2, opt3         ==>            opt2  opt2
opt1, opt2, opt3                        opt1

Which looks like plan comparison table such as this Office 365 plan comparison from Microsoft.

enter image description here

If you let users only choose one option and everything else below it comes with it, I'd try similar approach to plan comparison. It adds redundancy by repeating the options but if done right, shouldn't be a problem.


It makes sense to split the checkboxes into reasonable chunks and present them sequentially to the user, so it's obvious how picked checkboxes affect the upcoming available options.

I would recommend considering the wizards used by the websites that provide computer technics. Frequently the previous choices affect the further options.

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.