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

Stepper props API
				Default	Description
`activeStep`	`number`	Yes	props	`—`	The index of the currently active step.
`aria-describedby`	`string`	No	aria	`—`	ID of an element that describes the stepper container.
`aria-label`	`string`	No	aria	`—`	Accessible label for the stepper container. Use this when there is no visible external label.
`aria-labelledby`	`string`	No	aria	`—`	ID of an element that labels the stepper container. Takes precedence over aria-label when provided.
`className`	`string`	No	styling	`—`	Additional class names for styling customization.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`disableBackNavigation`	`boolean`	No	props	`false`	If true, disables backward navigation (users cannot go to previous steps).
`getStepAriaLabel`	`((step: Step, index: number, stepCount: number, isActive: boolean, isCompleted: boolean) => string)`	No	events	`—`	Optional custom accessible label generator for each step button.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Adds glass styling to the step buttons.
`groupLabel`	`string`	No	props	`"Progress Stepper"`	Fallback hidden label text when no aria-label or aria-labelledby is provided. Defaults to "Progress Stepper".
`onStepClick`	`((stepIndex: number) => void)`	No	events	`—`	Optional callback when a step is clicked.
`orientation`	`OrientationType`	No	props	`"horizontal"`	Orientation of the stepper. "horizontal" \| "vertical"