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}
  />

Visual variants

Themes

primary

Progress Stepper

secondary

Progress Stepper

tertiary

Progress Stepper

quaternary

Progress Stepper

States

success

Progress Stepper

warning

Progress Stepper

error

Progress Stepper

info

Progress Stepper

Sizes

Progress Stepper

small

Progress Stepper

medium

Progress Stepper

large

Progress Stepper

Variants

solid

Progress Stepper

outline

Progress Stepper

glass

Progress Stepper

Rounding

none

Progress Stepper

medium

Progress Stepper

large

Progress Stepper

Shadows

none

Progress Stepper

light

Progress Stepper

strong

Progress Stepper

visual-variants.tsx

// Themes

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

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

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

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

// States

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

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

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

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

// Sizes

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

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

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

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

// Variants

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

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

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

// Rounding

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

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

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

// Shadows

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

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

  const [activeStep, setActiveStep] = useState(0);
  const steps = [
    { label: "Start", icon: FaClipboardList },
    { label: "Review", icon: FaFileAlt },
    { label: "Submit", icon: FaCheckCircle },
  ];
  
  <Stepper shadow="strong"
    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.
`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"
`rounding`	`RoundingType`	No	styling	`configured default rounding (fallback: "medium")`	Rounding of the stepper buttons. "none" \| "small" \| "medium" \| "large" \| "full"