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.


mode: 'horizontal' | 'vertical''horizontal'The wizard can be showed in horizontal or vertical.
defaultCurrentStep: numberInitially selected step, only when it is uncontrolled.
currentStep: number0Defines which step is marked as the current. The numeration starts at 0. If undefined, the component will be uncontrolled and the step will be managed internally by the component.
onStepClick: functionThis function will be called when the user clicks a step. The step number will be passed as a parameter.
steps: object[][]An array of objects representing the steps. Each of them has the following properties:
  • Label: string: Step label.
  • Description: string: Description that will be placed next to the step.
  • Icon: string | SVGSVGElement: Element or path used as the icon displayed in the step.
  • Disabled: boolean: Whether the step is disabled or not.
  • Valid: boolean: Whether the step is valid or not.
margin: string | objectSize of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
tabIndex: number0Value of the tabindex attribute that is given to all the steps.