Wizard

Ready

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.

Code

Usage

Specifications

Props

Name	Default	Description
mode: 'horizontal' \| 'vertical'	`'horizontal'`	The wizard can be showed in horizontal or vertical.
defaultCurrentStep: number		Initially selected step, only when it is uncontrolled.
currentStep: number	`0`	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.
onStepClick: function		This 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 \| object		Size 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: number	`0`	Value of the tabindex attribute that is given to all the steps.

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 width="32px" height="32px" viewBox="0 0 32 32" fill="currentColor">
      <path d="M22.56,16.53a9.95,9.95,0,0,1-13.12,0A15,15,0,0,0,1,30a1,1,0,0,0,1,1H30a1,1,0,0,0,1-1A15,15,0,0,0,22.56,16.53Z" />
      <circle cx="16" cy="9" r="8" />
    </svg>
  );

  const homeIcon = (
    <svg
      viewBox="0 0 24 24"
      enableBackground="new 0 0 24 24"
      fill="currentColor"
    >
      <g id="Bounding_Box">
        <rect fill="none" width="24" height="24" />
      </g>
      <g id="Master">
        <path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
      </g>
    </svg>
  );

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

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

  const userIcon = (
    <svg width="32px" height="32px" viewBox="0 0 32 32" fill="currentColor">
      <path d="M22.56,16.53a9.95,9.95,0,0,1-13.12,0A15,15,0,0,0,1,30a1,1,0,0,0,1,1H30a1,1,0,0,0,1-1A15,15,0,0,0,22.56,16.53Z" />
      <circle cx="16" cy="9" r="8" />
    </svg>
  );

  const homeIcon = (
    <svg
      viewBox="0 0 24 24"
      enableBackground="new 0 0 24 24"
      fill="currentColor"
    >
      <g id="Bounding_Box">
        <rect fill="none" width="24" height="24" />
      </g>
      <g id="Master">
        <path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
      </g>
    </svg>
  );

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

Props
Examples

Edit this page on GitHub