Stepper

molecules

Horizontal step indicator — 3-6 steps with state (complete/current/upcoming). Used in checkout, multi-step forms, onboarding.

ARIA Role: list

Demo

Demo for Stepper (molecules)

Horizontal step indicator — 3-6 steps with state (complete/current/upcoming). Used in checkout, multi-step forms, onboarding.

Props

PropTypeRequiredDefaultDescription
stepsStep[]Yes—3-6 steps (NASA Rule 2)
currentIndexnumberYes—0-based

TypeScript Interface

interface StepperProps {
  steps: { id: string; label: string; description?: string }[];
  currentIndex: number;
  onStepClick?: (index: number) => void;
  ariaLabel: string;
}

Assertions (NASA Rule 5)

  • [type]steps bounded 3-6 (NASA Rule 2)(NASA Rule 2)
  • [aria]role='list' with aria-current='step' on current; non-current steps get aria-disabled if not clickable(WCAG 4.1.2)

Usage

Import

import { Stepper } from '@epasslive/design-system'

Basic

<Stepper />

With Variants

<Stepper variant="primary" size="md" />