Progressive Disclosure

Overview

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.

Description

The pattern includes three examples:

Examples

Single Level Conditional Fields

Image of single level conditional fields

Multi Level Conditional Fields

Image of multi level conditional fields

Conditional Fields with Drop-down Menu

Image of conditional fields with drop-down menu

Progressive Disclosure

Image of single level conditional fields

  1. Parent Control: This control either shows or hides fields based on whether or not it’s selected.

  2. 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.