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.

- 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.
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.
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.
The wizard component has two variants depending on its orientation: horizontal and vertical.
- 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.