Stepper

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

Usage

Default

Progress Stepper


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

Data table
	Type	Description
activeStep	number	The index of the currently active step.
aria-describedby	string	ID of an element that describes the stepper container.
aria-label	string	Accessible label for the stepper container. Use this when there is no visible external label.
aria-labelledby	string	ID of an element that labels the stepper container. Takes precedence over aria-label when provided.
className	string	Additional class names for styling customization.
data-testid	string	Optional test ID for testing purposes.
disableBackNavigation	boolean	If true, disables backward navigation (users cannot go to previous steps).
getStepAriaLabel	((step: Step, index: number, stepCount: number, isActive: boolean, isCompleted: boolean) => string)	Optional custom accessible label generator for each step button.
groupLabel	string	Fallback hidden label text when no aria-label or aria-labelledby is provided. Defaults to "Progress Stepper".
onStepClick	((stepIndex: number) => void)	Optional callback when a step is clicked.
orientation	OrientationType	Orientation of the stepper. "horizontal" \| "vertical"
rounding	RoundingType	Rounding of the stepper buttons. "none" \| "small" \| "medium" \| "large" \| "full"
shadow	ShadowType	Shadow style for the stepper buttons. "none" \| "light" \| "medium" \| "strong" \| "intense"
size	SizeType	Size of the stepper icons. "xs" \| "small" \| "medium" \| "large" \| "xl"
state	StateType	State of the stepper. "success" \| "error" \| "warning" \| "disabled" \| ""
steps	Step[]	An array of steps, each with a label and optional icon.
theme	ThemeType	Theme style for the stepper. "primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"