Nesting
This is a working draft Report issue
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:
Disable Nested Elements
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
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.
Drop-down Lists
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.