nabs-ui-stepper

Reusable React stepper control for the Nabs UI library.

Usage

import { Stepper } from "@net-advantage/nabs-ui-stepper";

export function Example() {
  return (
    <Stepper
      stepsPosition="left"
      stepsAlignment="center"
      stepLabelAlignment="right"
      showCenterLine
      defaultActiveIndex={0}
      onStepChange={(index) => console.log(index)}
    >
      <Stepper.Steps>
        <Stepper.Step index={0} label="Details" icon="🧾" />
        <Stepper.Step index={1} label="Review" icon="🔍" />
        <Stepper.Step index={2} label="Submit" icon="✅" />
      </Stepper.Steps>
      <Stepper.ContentSteps>
        <Stepper.ContentStep index={0}>Step 0 content</Stepper.ContentStep>
        <Stepper.ContentStep index={1}>Step 1 content</Stepper.ContentStep>
        <Stepper.ContentStep index={2}>Step 2 content</Stepper.ContentStep>
      </Stepper.ContentSteps>
    </Stepper>
  );
}

Props

• stepsPosition supports top, bottom, left, and right.
• stepsAlignment supports left, right, center, and spread.
• stepLabelAlignment supports left, right, top, and bottom for all step labels.
• showCenterLine toggles the connector line between steps.
• activeIndex controls the active step.
• defaultActiveIndex sets the initial uncontrolled step.
• onStepChange fires with the selected step index.
• Stepper.Step supports icon for an optional step icon.

The step index and content step index are matched by the same numeric value.