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.
- The horizontal/vertical line should not extend to the left of the first circle or to the right of the last circle.
- Do not overwhelmed the component with too many steps, it won't be a good idea for the user workflow neither for the display of the information.
There could be some scenarios in which the content of a step wants to be validated while the user is filling the fields with information or doing relevant actions in every step of the wizard. For that case, a validation mark can be represented in every step once the user navigate to the next step in the linear progression. This will represent the status of the validation respecting the content, with a success mark or an error mark visible on the step mark.
Different variations of the content can be performed in the step:
- Only numbers
- Only icons
- Numbers/icons with step label