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.


defaultCurrentStepnumberInitially selected step, only when it is uncontrolled.-
currentStepnumberDefines 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.0
mode'horizontal' | 'vertical'The wizard can be shown in horizontal or vertical.'horizontal'
{ label: string; description?: string; icon?: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); disabled?: boolean; valid?: boolean; }[]An array of objects representing the steps. Each of them has the following properties:
  • label: Step label.
  • description: Description that will be placed next to the step.
  • icon: Material Symbol name or SVG element used as the icon displayed in the step.
  • disabled: Whether the step is disabled or not.
  • valid: Whether the step is valid or not.
onStepClick(currentStep: number) => voidThis function will be called when the user clicks a step. The step number will be passed as a parameter.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
tabIndexnumberValue of the tabindex attribute.0