I am looking to set a system wide standard for the design of dependencies for grouped checkboxes. Are there any best practices for doing it one way over the other?

In my examples the first 3 checkboxes in the group have dependencies.

Right below the checkbox that is checked: enter image description here

Below the entire checkbox group: enter image description here

  • 1
    As a general rule it is always better to give feedback as soon as possible, as close as possible. This makes it easier for users to follow the cause-effect relationships.
    – mapto
    May 2, 2019 at 14:35
  • What is the context? Do users choose multiple races? Can you please explain what the user is trying to achieve.
    – Mo'ath
    May 3, 2019 at 14:00

2 Answers 2


Based on some of the basic rules like "Logical objects should be grouped together", IMO first option is lot better.

In second option - if someone wants to deselect one of previous selected checkboxes one must count which one is it in the list.

If you take first option, and place a bit of additional margin between groups (group = checkbox + 1 input field), you should have clear UI / UX.


For this example I would refer to the law of proximity

"Objects that are near, or proximate to each other, tend to be grouped together."

A more in depth look at this law and how it is applied to GUI you can see on Nielsen Norman website

"When buttons, drop-downs, checkboxes, or other actionable GUI elements are too far away from the objects they act on, people don't see them."

In which case version 1 of your design is a better solution.

Hope this helps. Cheers!

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.