Stepper

import { Stepper } from '@elirobinson/react/components/molecules/Stepper';

import { Stepper } from '@elirobinson/react/components/molecules/Stepper';

const steps = [{ label: 'Cart' }, { label: 'Shipping' }, { label: 'Payment' }, { label: 'Review' }];

export default function Basic() {
  return <Stepper steps={steps} activeStep={2} />;
}

When to use it

Use Stepper to show progress through a fixed, linear, multi-step flow — checkout, onboarding, a multi-page form. activeStep is 1-indexed: a step is complete when its number is below activeStep, active when it equals activeStep, and upcoming otherwise. It's a display component only — it doesn't make steps clickable and it doesn't manage which step you're on; your flow's own state drives activeStep.

For a continuous percentage rather than discrete named steps, use Progress instead.

Through a flow

import { Stepper } from '@elirobinson/react/components/molecules/Stepper';

const steps = [{ label: 'Account' }, { label: 'Studio details' }, { label: 'Invite clients' }];

export default function Progress() {
  return (
    <div className="demo-col">
      <Stepper steps={steps} activeStep={1} />
      <Stepper steps={steps} activeStep={2} />
      <Stepper steps={steps} activeStep={3} />
    </div>
  );
}

Props

Accessibility

• Renders a native <ol> with one <li> per step — the ordered list itself conveys sequence, independent of any visual styling.
• The active step's <li> gets aria-current="step".
• The step indicator (a number or a ✓ for completed steps) is not hidden from screen readers — it's announced along with the label, so a completed step reads as something like "check mark, Account" rather than silently showing just "Account."
• Keyboard: none — Stepper renders no interactive elements, so there's nothing to tab to. If you need clickable steps (jump back to a previous one), you'll need to build that affordance yourself; the component doesn't invent it.
• The ref forwards to the outer <ol>.

Related