Resources
Intro & Anatomy
The Progressive Disclosure pattern enables the management of sequential processes containing a minimum of two steps. It categorizes steps into three states: Active, Done/Completed, and ToDo/Pending, aiding in visualizing the progress. Users are unable to skip steps, for example they cannot jump from step 1 to step 4. Users must adhere to the sequential order of steps.
The Progressive Disclosure divides complex tasks into manageable chunks, aiding users in understanding and completing them. Contextual help, such as text explanations, tooltips, and other UI elements, can guide users through each step.
The pattern includes the following elements:
- Number/Status Icon: Represents the step's sequential order.
- Step Summary: A short summary of a completed step.
- Short Step Description: A brief summary of the step's objective.
- Long Step Title: Provides a detailed inquiry into the purpose or goal of the step, we recommend a question.
- Content: Additional information or resources pertinent to the step.
- Button or Button Group: Allows interaction with the step, typically to mark completion or advance to the next step.
Steps
The Progressive Disclosure pattern offers three states: Active, Done/Completed, and ToDo/Pending. Each step is assigned a numerical identifier, arranged in descending order. Completed steps are marked with the check_circle icon.
Please note that users are unable to skip steps, for example they cannot jump from step 1 to step 4. Users must adhere to the sequential order of steps, although they have the option to move backwards to redo steps.
To Do / Pending – a step not yet completed
Active – the current step
Done/Completed – completed step
Content
The Progressive Disclosure pattern can be filled with either text or form elements, though each step necessitates a title and a button [or button group]. Additionally, other text forms such as lists or links, as well as downloads and other visual elements can be displayed.
Example: Welcome Screen
Example: Form, Download
Example: Summary
States
To Do / Pending – a step not yet completed
Active – the current step
Done/Completed – completed step
![Hover [only on already completed steps]](https://studio-assets.supernova.io/design-systems/23682/b54130d9-915a-4765-9475-b5588a3d2006.png)
Hover [only on already completed steps]
Displaying on Desktop
While desktop-width is depening on your design, we recommend a max. width of 520px.
Displaying on Mobile
Please display the Progressive Disclosure pattern full width [100vw, 100%] on mobile.
