Wizard

Wizard represents a stepped workflow as a form of linear and mandatory progression through a defined process with several bullet points where the user need to interact with the content of each step during the workflow.

Overview

Code

Introduction

The wizard component helps users navigate through multi-step processes in a structured and guided manner. It breaks down complex workflows into manageable steps, improving clarity and reducing cognitive load. Each step represents a key stage of the process, allowing users to track progress and move forward or backward as needed. Wizards are commonly used in forms, onboarding flows, and setup configurations where sequential input is required.

Anatomy

1.
Step: represents an individual stage in the wizard navigation. Each step corresponds to a specific section of a multi-step process, guiding the user progressively through a flow.
2.
Label: a descriptive title for the step that provides users with a clear understanding of the content or action required at that stage.
3.
Separator: a visual connector between steps that indicates the sequence and relationship between them, reinforcing the step-by-step progression.
4.
Step validator: a status indicator (checkmark or error icon) that provides feedback on whether the step has been successfully completed or requires attention.
5.
Description: an optional text displayed alongside a step to offer additional guidance, clarifications, or instructions, ensuring users understand the requirements before proceeding.

Key interactions and features

To better understand the wizard component and its possible use cases when working with a form, it's important to review its key characteristics and interactions.

Users progress through the wizard by clicking on steps, using navigation buttons, or interacting with the interface if direct access to steps is enabled. Navigation can be controlled based on the form's requirements, preventing users from skipping essential steps when necessary.

Linear vs. Non-Linear Flow

Wizards can follow a linear approach, where users must complete each step in sequence before proceeding, or a non-linear approach, which allows free movement between steps. The choice depends on the complexity of the process and whether dependencies exist between steps.

Step validation

There may be scenarios where the content of a step needs to be validated while the user is filling in fields or performing relevant actions within each step of the wizard. In such cases, a validation mark can be displayed on each step once the user progresses to the next one. This mark will indicate the validation status of the content, showing either a success or error mark on the step.

Optional description and icons

Each step can include description or validation icons to provide context and feedback.

Variants

The wizard component has two variants depending on its orientation: horizontal and vertical.

Horizontal

The horizontal variant of the wizard is suitable for workflows where space is available horizontally, making it ideal for tasks like multi-step forms and progress tracking. For example, setting up a user account with several steps.

Vertical

The vertical variant works well when horizontal space is limited, often used in scenarios like long forms or detailed steps in a process. An example could be an onboarding process with in-depth configuration options.

Best practices

Keep steps clear and logical: ensure that each step represents a meaningful part of the process, following a natural order that users can easily follow.
Use concise and descriptive labels: step labels should clearly indicate the purpose of each step to help users understand where they are in the process.
Provide real-time validation: if validation is required before moving forward, display clear and immediate error messages to help users correct mistakes.
Indicate progress visually: use clear indicators to show the user's current step, completed steps, and upcoming steps to enhance orientation and usability.
Confirm before final submission: if the wizard leads to an irreversible action (e.g., submitting an application), provide a review step where users can check and edit their inputs.
Choose the right layout: use the horizontal variant for processes with a small number of steps and the vertical variant for complex flows with long step descriptions.