Skip to content

Multi-Steps / Wizard

Synonym: Path/Progress/Stepper

Structure The "Multi" Steps or Wizard Component communicates to the user the progress of a particular process. Can be numbered or not numbered, depending on the situation.

Variants

vertical Orientation

Substeps

horizontal Orientation

🚧 To be defined.

For use when forms/setup instructions can and should be split into multiple pages. Each step should correspond to an individual page of form elements, using the status key to denote the user's progress.

horizontal with Chevron Style

Mainly used for our classical Wizard steps.

Substeps

Learning Path

The Learning Path is a special style of multi steps, with options only available to the learning scenario.

When to use

When not to use