Progressive Disclosure
This pattern uses progressive disclosure to hide and show fields based on a particular selection. The workflow is simple and the user can focus on the task at hand. This approach saves users’ time from unnecessarily identifying what fields can or cannot be interacted with. This approach is also helpful to color-blind users because it avoids using color to indicate whether or not a field is available.
This pattern includes three examples:
Single Level Conditional Fields
Multi Level Conditional Fields
Conditional Fields with Dropdown Menu
Progressive Disclosure
-
Parent Control: This control either shows or hides fields based on whether or not it’s selected.
-
Progressive Disclosure: Additional input fields or controls that are children of the parent control are indented to denote that they are a subset of the previous selection. Whether or not these fields and/or controls are visible is dependent on the selected state of the parent control.