Stepper

Multi-step progress indicator for signup and application flows. Three visual states per step — pending, current, completed — with horizontal layout on desktop and vertical layout on mobile. Pass onStepClick to enable keyboard-accessible step navigation; omit it to render a static progress display.

Static — read-only progress

No onStepClick: the indicators render as plain divs with aria-current="step" on the active item.

  1. AccountEmail + phone
  2. VerifyOTP via SMS or email
  3. KYCID + biographic
  4. ReviewConfirm and submit

Interactive — clickable steps

With onStepClick, each indicator becomes a button. Tab through them with the keyboard — focus ring uses the brand accent.

  1. AccountEmail + phone
  2. VerifyOTP via SMS or email
  3. KYCID + biographic
  4. ReviewConfirm and submit
Current: verify

Vertical orientation

Set orientation="vertical" for narrow side panels or mobile-only screens that prefer a stacked progress.

  1. Personal Info
  2. Academic History
  3. Program Choices
  4. Supporting Documents
  5. Fees
  6. Submit

Accessibility

  • Renders as an ordered list (<ol>) so assistive tech announces the count and position.
  • aria-current="step" tags the active step.
  • Each interactive indicator has an aria-label describing the step name, position, and status.
  • Connector segments are aria-hidden so screen readers don't double-announce them.
  • On orientation="horizontal" the layout collapses to vertical at md breakpoint and below.