A Wizard is a step-by-step component that enables users to enter information in a predetermined order.


When the component is active the user should be able to enter, edit or see data for each step and move back and forth using the back and next buttons. Once the user reaches the last step, a finish button will be available (instead of next).

Wizard example

NOTE: It is possible to hide step numbers and/or diable specific steps.

It is also possible to rearrange steps using the up (↑) and down (↓) arrows, available in the "Properties" panel.

Steps sorting example



Do's and Don'ts

For more details, refer to Wizard Usage and Visual styleguides in our Storybook.