Progressive Disclosure

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

Image of single level conditional fields

Multi Level Conditional Fields

Image of multi level conditional fields

Conditional Fields with Dropdown Menu

Image of conditional fields with dropdown 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.

  • View Angular PatternFly Example
  • View PatternFly NG Example
  • View PatternFly React Example

Code icon

PatternFly Core Example Not Available

There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.

Visit the Contributing to PatternFly documentation to learn how to contribute the code.