The Wizard page layout is designed to guide users through a multi-step process in a clear, structured, and intuitive way. It breaks down complex tasks into manageable steps, ensuring users can progress smoothly while keeping track of where they are in the workflow.
The Wizard layout is designed to guide users through a multi-step process in a clear, structured, and intuitive way. It breaks down complex tasks into manageable steps, ensuring users can progress smoothly while keeping track of where they are in the workflow.
The Wizard page layout is appropriate when a task must be completed through a defined sequence of steps. It is ideal for workflows that require user confirmation, data input, or verification at multiple points, ensuring the user clearly understands what to do next and how far along they are in the process.
Use this pattern when:
Avoid using a wizard when:
The Wizard maintains a consistent dashboard layout throughout a multi-step process.
Its core structure consists of a Progress Indicator and a Main Content area. Depending on the needs of the workflow, the layout may also include a separate [Button Boardlet]( ), an optional Sidebar, split main content, or nested progress bars within a step. These elements should stay aligned with the dashboard grid and support the primary flow without changing the overall structure of the Wizard.
The Progress Indicator sits at the very top of the main content area and spans its full available width. In the standard layout, it extends across the full width of the dashboard. When sidebars are present, it remains aligned with the main content area and next to the sidebar.
It is displayed as a ghost boardlet without a header or footer and uses the Progress States component. The stages remain consistent throughout the process and should not change between steps, except for completion marks that reflect progress.
Each stage has a descriptive title so users can clearly understand their current position in the process and the sequence of steps.
The Main Content is displayed in a default boardlet positioned directly below the Progress Indicator and extending to the bottom of the dashboard. Its overall size should remain consistent across steps to create a stable layout throughout the process.
This area contains the content required for the current step, such as forms, details, instructions, scanning components, input fields, or confirmation modules.
When no separate [Button Boardlet]( ) is used, the Main Content boardlet includes the step actions at the bottom. It should provide at least two buttons: a primary action on the right to advance to the next step, and a secondary action on the left to return to the previous step. A cancel action may also be included on the left when needed. The placement and behavior of these actions should remain consistent throughout the process.
In some steps, the Main Content may be divided into multiple sections, such as a table paired with an [expanded search boardlet]( ). This split layout does not need to appear on every step. However, the combined area of all sections should remain comparable to the Main Content area used in steps without a split layout.
A split layout should use no more than three content sections. Sections may be arranged vertically or horizontally, but both orientations should not be combined within the same step unless there is a clear need.
When the Main Content is split, step actions should be placed in a separate [Button Boardlet]( ) for next, back, and optional cancel actions.
The optional Button Boardlet is used when step actions are separated from the Main Content, typically in split layouts. It is displayed as a default boardlet without a title or footer and is only one row high.
The primary next action is placed on the right. Back actions appear on the left, with an optional cancel action when needed. The placement of these actions should remain consistent with the rest of the Wizard.
For more details, see [button boardlet]( ).
An optional Sidebar may appear on the right side of the Wizard and typically spans from the top to the bottom of the dashboard. It usually occupies two to three columns, reducing the horizontal space available to the Progress Indicator and Main Content.
The Sidebar does not need to be a direct part of the process. It can provide supplementary information, contextual details, or navigation actions related to the process or its subject. When needed, it may be divided into multiple boardlets.
Nested Progress Bars are used when a step within the Wizard contains its own sub-process. In this case, the secondary progress indicator appears within the Main Content boardlet and can be separated from the rest of the content by a [Vertical Divider]( ).
The nested progress area is positioned on the left side of the Main Content. It includes its own progress indicator and can extend vertically across the full height of the boardlet, continuing alongside both the content area and the actions at the bottom. In some cases, the secondary progress indicator may appear below essential information related to the subject of that sub-process.
This pattern does not need to appear in every step of the main process. Where it is used, the secondary steps are typically more detailed than the steps shown in the main Progress Indicator. Triggering the next-step action advances the secondary progress for as long as the nested process is active.
Completion of the nested process usually triggers a simple Modal Notification indicating whether the process was successful.
Keep the step model stable throughout the process. The number, order, and titles of steps should remain consistent. Do not change steps during the process unless the workflow explicitly requires it and the impact is clear to users.
Maintain a predictable layout across steps. Keep the Progress Indicator at the top and preserve a comparable Main Content footprint throughout the process. Avoid major layout shifts that force users to reorient on every step.
Keep each step focused on one clear objective. A step should support a single decision, input task, or confirmation task. Break up dense or unrelated content rather than combining too much into one screen.
Show one clear primary action per step. The primary action should always represent the next logical move forward, and its label should clearly reflect the result of the action.
Keep step actions in a consistent location. Actions may appear in the Main Content or in a separate [Button Boardlet]( ), but their placement should remain consistent throughout the Wizard whenever possible.
Use split layouts only when the step genuinely requires them. Split Main Content should support closely related tasks within the same step and should not exceed three coordinated sections. Avoid combining horizontal and vertical splits within the same step unless there is a clear need.
Treat the Sidebar as supporting content. A Sidebar may provide context, reference information, or related actions, but it should not compete with the main task or introduce a second primary workflow.
Use nested progress bars sparingly. Only introduce nested progress when a single step contains a clearly bounded sub-process. If the secondary sequence is central to the overall flow, represent it as regular Wizard steps instead.
Make progression rules clear. Users should understand when they can continue, why an action may be disabled, and what is required to complete the current step.
Protect user progress. Back and Cancel behavior should be predictable. When users may lose work, provide a confirmation step or warning before exiting.
Provide clear feedback at key moments. Show validation, loading, success, and error states where needed, and make completion visible in the Progress Indicator and final confirmation messaging.