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.

Props

Name	Type	Description	Default
defaultCurrentStep	`number`	Initially selected step, only when it is uncontrolled.	-
currentStep	`number`	Defines 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'`
Required steps	`{ 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) => void`	This 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' \| Margin`	Size 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.	-
tabIndex	`number`	Value of the `tabindex` attribute.	`0`

Examples

Controlled

() => {
  const [myCurrentStep, setMyCurrentStep] = useState(2);
  const onStepClick = (i) => {
    setMyCurrentStep(i);
  };

  return (
    <DxcInset space="2rem">
      <DxcWizard
        currentStep={myCurrentStep}
        onStepClick={onStepClick}
        steps={[
          {
            label: "Personal info",
            valid: true,
          },
          {
            label: "Policy",
            valid: true,
          },
          {
            label: "Payment",
          },
          {
            label: "Confirm details",
          },
        ]}
      ></DxcWizard>
    </DxcInset>
  );
}

() => {
  const [myCurrentStep, setMyCurrentStep] = useState(2);
  const onStepClick = (i) => {
    setMyCurrentStep(i);
  };

  return (
    <DxcInset space="2rem">
      <DxcWizard
        currentStep={myCurrentStep}
        onStepClick={onStepClick}
        steps={[
          {
            label: "Personal info",
            valid: true,
          },
          {
            label: "Policy",
            valid: true,
          },
          {
            label: "Payment",
          },
          {
            label: "Confirm details",
          },
        ]}
      ></DxcWizard>
    </DxcInset>
  );
}

Uncontrolled

() => {
  const onStepClick = (i) => {
    console.log(i);
  };

  return (
    <DxcInset space="2rem">
      <DxcWizard
        defaultCurrentStep={1}
        onStepClick={onStepClick}
        steps={[
          {
            label: "Cart",
          },
          {
            label: "Address",
          },
          {
            label: "Payment",
          },
        ]}
      ></DxcWizard>
    </DxcInset>
  );
}

() => {
  const onStepClick = (i) => {
    console.log(i);
  };

  return (
    <DxcInset space="2rem">
      <DxcWizard
        defaultCurrentStep={1}
        onStepClick={onStepClick}
        steps={[
          {
            label: "Cart",
          },
          {
            label: "Address",
          },
          {
            label: "Payment",
          },
        ]}
      ></DxcWizard>
    </DxcInset>
  );
}

Icons

() => {
  const [myCurrentStep, setMyCurrentStep] = useState(2);
  const onStepClick = (i) => {
    setMyCurrentStep(i);
  };

  const userIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor">
      <path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/>
    </svg>
  );

  return (
    <DxcInset space="2rem">
      <DxcWizard
        currentStep={myCurrentStep}
        onStepClick={onStepClick}
        steps={[
          {
            label: "Personal info",
            valid: true,
            icon: userIcon,
          },
          {
            label: "Address",
            valid: true,
            icon: "home",
          },
          {
            label: "Payment",
          },
          {
            label: "Confirm details",
          },
        ]}
      ></DxcWizard>
    </DxcInset>
  );
}

() => {
  const [myCurrentStep, setMyCurrentStep] = useState(2);
  const onStepClick = (i) => {
    setMyCurrentStep(i);
  };

  const userIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor">
      <path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/>
    </svg>
  );

  return (
    <DxcInset space="2rem">
      <DxcWizard
        currentStep={myCurrentStep}
        onStepClick={onStepClick}
        steps={[
          {
            label: "Personal info",
            valid: true,
            icon: userIcon,
          },
          {
            label: "Address",
            valid: true,
            icon: "home",
          },
          {
            label: "Payment",
          },
          {
            label: "Confirm details",
          },
        ]}
      ></DxcWizard>
    </DxcInset>
  );
}

Props
Examples

Edit this page on GitHub

Report an issue on GitHub