Stepper

A component that visually represents a sequence of steps in a process, allowing navigation between steps.

Usage & Examples

Default

Progress Stepper
default.tsx

  const [activeStep, setActiveStep] = useState(0);
  const steps = [
    { label: "Start", icon: FaClipboardList },
    { label: "Review", icon: FaFileAlt },
    { label: "Submit", icon: FaCheckCircle },
  ];
  
  <Stepper
    steps={steps}
    activeStep={activeStep}
    onStepClick={setActiveStep}
  />

Props API

19 props
Columns
Stepper props API
Default
Description
activeStepnumberYesprops—The index of the currently active step.
aria-describedbystringNoaria—ID of an element that describes the stepper container.
aria-labelstringNoaria—Accessible label for the stepper container. Use this when there is no visible external label.
aria-labelledbystringNoaria—ID of an element that labels the stepper container. Takes precedence over aria-label when provided.
classNamestringNostyling—Additional class names for styling customization.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
disableBackNavigationbooleanNopropsfalseIf true, disables backward navigation (users cannot go to previous steps).
getStepAriaLabel((step: Step, index: number, stepCount: number, isActive: boolean, isCompleted: boolean) => string)Noevents—Optional custom accessible label generator for each step button.
groupLabelstringNoprops"Progress Stepper"Fallback hidden label text when no aria-label or aria-labelledby is provided. Defaults to "Progress Stepper".
onStepClick((stepIndex: number) => void)Noevents—Optional callback when a step is clicked.
orientationOrientationTypeNoprops"horizontal"Orientation of the stepper. "horizontal" | "vertical"
roundingRoundingTypeNostylingconfigured default rounding (fallback: "medium")Rounding of the stepper buttons. "none" | "small" | "medium" | "large" | "full"