Wizard

A wizard is a setup process where the user is guided through a series of steps to achieve a goal. The purpose of the pattern is to simplify tasks by cutting them into smaller ones. Wizards help a user to view the process upfront wherein, the required information can be filled. It is easy to navigate between the steps which helps the user to complete lengthy forms in less time. Also the user can save it and revisit the wizard when he/she has the relevant required information available.

Previewlink

Exampleslink

  1. Conditional

    In some cases, the steps may increase or decrease when a specific option is selected, making it a conditional stepper. The user can navigate between the steps using the stepper panel.

    Conditional wizard
  2. Long formlink

    In this variation, the user can simply scroll to the next step instead of navigating one step at a time. As the user scrolls through each step, the stepper will also update.

    Long form
  3. Fixedlink

    This is a variation of the conditional wizard, in which there are a limited number of steps and the forms are more compact and light in content.

    Fixed wizard
  4. Horizontallink

    A horizontal stepper is another variation, which is ideal for when the content of one step depends on an earlier step.

    Horizontal wizard

Structurelink

The wizard pattern includes components like the stepper, buttons, navigation and progress bar. The user can input required information in the content area.

The wizard occupies the full size of the screen and the app bar always remains visible. To help the user focus solely on the form, it is recommended to reduce the ability to navigate away from the form.

The number of steps should be below ten.

Use labels or step headers, to give a brief explanation of the purpose of the step.

Provide clear navigation buttons to help users navigate between steps.

Wizard structure

How it workslink

The wizard pattern uses a combination of design system components and elements.:

There are multiple use cases applicable.

Mandatory fields completed: If the user has filled the mandatory fields, a green tick is displayed.

Mandatory fields not complete: If there is a mandatory field and the user has not completed it, a warning or icon will be displayed to the user so that the user can complete it at a later point of time.

No Mandatory fields: If there are no mandatory fields and a user navigates to this step and navigates to another step then a green tick is displayed.

How it works