GuidanceStepper

The guidance stepper is a indicator that you can use to show a to a user while he completes a process that can be separated into multiple steps that are displayed on different pages. An example could be a long form that doesn't fit on one page.

Usage Example

const GuidanceStepperExample: React.FC = () => {
  const [activeStepId, setActiveStepId] = useState("1");

  return (
    <GuidanceStepper
      aria-label="Example guidance"
      activeStepId={activeStepId}
      steps={[
        {
          id: "1",
          title: "Step 1",
        },
        {
          hasErrors: true,
          id: "2",
          title: "Step 2 with errors",
        },
        {
          id: "3",
          title: "Step 3",
        },
      ]}
      onStepChange={setActiveStepId}
    />
  );
};

1. 1

   Step 1
2. 2

   Step 2 with errors
3. 3

   Step 3

Props

type GuidanceStep = {
  id: string;
  title: React.ReactNode;
  hasErrors?: boolean;
};