Skip to content
rdloom

Steps

Shows where someone is in a multi-step process, such as checkout or setup: done, current and upcoming steps. It displays progress; you control the steps and buttons.

Navigationv0.1.0experimentalWCAG 2.2 AAView spec
  1. Step 1 of 4, Completed: Cart
  2. Step 2 of 4, Current step: Payment
  3. Step 3 of 4, Not started: Review
  4. Step 4 of 4, Not started: Done
import { Step, Steps } from "@rdloom/react";

export default function StepsHorizontalExample() {
  return (
    <div className="w-[34rem] max-w-full">
      <Steps label="Checkout progress" currentStep={2}>
        <Step title="Cart" />
        <Step title="Payment" />
        <Step title="Review" />
        <Step title="Done" />
      </Steps>
    </div>
  );
}

Installation

npx rdloom add steps

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

Use another registry client
npx shadcn@latest add https://rdloom.vimalbhatt.com/r/steps.json

Works, but without upgrade tracking.

Usage

import { Step, Steps } from "@rdloom/react";

<div className="w-[34rem] max-w-full">
  <Steps label="Checkout progress" currentStep={2}>
    <Step title="Cart" />
    <Step title="Payment" />
    <Step title="Review" />
    <Step title="Done" />
  </Steps>
</div>

Vertical

  1. Step 1 of 4, Completed: Create your account
  2. Step 2 of 4, Completed: Verify your email
  3. Step 3 of 4, Current step: Connect a data source
  4. Step 4 of 4, Not started: Invite your team
import { Step, Steps } from "@rdloom/react";

export default function StepsVerticalExample() {
  return (
    <Steps label="Setup" orientation="vertical" currentStep={3}>
      <Step title="Create your account" />
      <Step title="Verify your email" />
      <Step title="Connect a data source" />
      <Step title="Invite your team" />
    </Steps>
  );
}

With descriptions

  1. Step 1 of 3, Completed: ProfileYour name and photo
  2. Step 2 of 3, Current step: WorkspaceName it and pick a plan
  3. Step 3 of 3, Not started: InviteAdd the people you work with
import { Step, Steps } from "@rdloom/react";

export default function StepsWithDescriptionsExample() {
  return (
    <Steps label="Onboarding" orientation="vertical" currentStep={2}>
      <Step title="Profile" description="Your name and photo" />
      <Step title="Workspace" description="Name it and pick a plan" />
      <Step title="Invite" description="Add the people you work with" />
    </Steps>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

PropTypeDefault
childrenrequired

Step elements, in order.

nodenone
currentSteprequired

The step the person is on, starting at 1. Earlier steps show as done.

numbernone
orientation

Lay the steps in a row or a column.

"horizontal" | "vertical""horizontal"
label

Accessible name of the list, e.g. "Checkout progress".

string"Progress"

Accessibility

Role list, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Not interactive.

Screen readers announce

  • Announced as a list with the number of steps
  • Each item reads its number, title and state, e.g. "Step 2, Payment, current step"

What your code must do

  • An ordered list with an accessible name; each step is a list item
  • The current step has aria-current="step"
  • Each step also says its state in words for screen readers (Completed, Current step, Not started), not only with an icon or color
  • Completed steps use a check icon, the current one a filled number, upcoming ones an outline: shapes differ, not only colors
  • Not interactive: if people can click a step, make it a link or button yourself

Guidelines

Use it when

  • Checkouts, onboarding and wizards with a known number of steps
  • Telling people how much is left

Avoid it when

  • Steps that can be done in any order: use a checklist
  • Navigating between pages: use Tabs or Breadcrumbs

Don't

  • More than about six steps
  • Using color alone to show the current step
  • Making steps clickable without keyboard access

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

  • --rd-color-action-primary
  • --rd-color-action-on-primary
  • --rd-color-border-default
  • --rd-color-border-strong
  • --rd-color-surface-default
  • --rd-color-surface-subtle
  • --rd-color-text-default
  • --rd-color-text-muted