Use nesting to form a hierarchy that expresses that one element contains or determines the following elements.

This hierarchy is often used to indicate that some elements are only relevant if a given parent element is selected.

The most common forms to express this dependency are to:

Example of an inactive checkbox inside an active checkbox

Example of a disabled nested element

Disable Nested Elements

Interactive Example for disabled sub elements in a set of checkboxes

Disable nested elements to help anticipate what enabling the parent will unlock, and to give additional context to the functionality of the parent.

Hide Nested Elements

Interactive Example for hiding sub elements in a set of checkboxes

Hide the nested elements if showing them would overly complicate the interface, or occupy too much space in the UI.

Only use this if the visible part provides enough context for people to not be suprised by the additional content. Consider using sub-menues for hiding more information.

Usage Examples

Checkboxes

On Desktop checkboxes are often used in nested groups that disable parts of the options.

Like Checkboxes, Drop-down lists can be used to determine what content to show. In this case content stays hidden until the corresponding list entry is selected.

Buttons

In a way, many buttons, like menus, also use nesting to hide content until pressed.