Nesting

This is a list of existing patterns applied to nesting UI elements to show dependency. Checkboxes are used as an example. Nesting also occurs with other UI elements like radio buttons, drop-downs etc.

To best experience the differences, enable the first sub option, then disable the primary option and re-enable it.

Disable Sub & hide State

show that sub are also disabled with parent
(seen in macOS & Firefox)

Option C

Part 1 of option C

Part 2 of option C

Hide Sub

hide sub elements if they can not be used
(seen in Firefox)

Option D

Part 1 of option D

Part 2 of option D

Disable Sub

retain previous sub-state in disabled elements
(seen in Windows, macOS & Firefox)

Option B

Part 1 of option B

Part 2 of option B

Hide Sub Toggle

hide sub elements if they can not be used
(seen in Windows)

Option D2

Part 1 of option D2

Part 2 of option D2

Hide & Reset Sub

hide sub elements and reset their value to default
(seen in Firefox)

Option E

Part 1 of option E

Part 2 of option E

Double-Dependent

show previous sub-state in disabled elements
(seen in HTML, Windows & macOS)

Option A

Part 1 of option A

Part 2 of option A