Skip to content
Try free

Steps

Progress through a task in order. Completed steps show a tick and can be revisited; the current step is marked.

  • Free core, MIT
  • Version 2.0.0-rc.1
  • APG pattern: Ordered list with aria-current="step"

Examples

These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.

Default

  3. InviteAdd people
  4. PlanChoose a plan, not started
Show the code

Default, code

<Steps current={3} onStepPress={() => {}} />

Vertical

  3. InviteAdd people
  4. PlanChoose a plan, not started
Show the code

Vertical, code

<Steps current={3} orientation="vertical" onStepPress={() => {}} />

Attention

  1. Your details, completed
  2. PaymentCard declined: try another card, needs attention
  3. Review
  4. Confirm, not started
Show the code

Attention, code

const steps: Step[] = [
  { label: 'Account', description: 'Name and email' },
  { label: 'Workspace', description: 'Name your team' },
  { label: 'Invite', description: 'Add people' },
  { label: 'Plan', description: 'Choose a plan' },
];

<Steps
  current={3}
  steps={[{ label: 'Your details' }, { label: 'Payment', description: 'Card declined: try another card', attention: true }, { label: 'Review' }, { label: 'Confirm' }]}
/>

Links

  1. AccountName and email, completed
  2. WorkspaceName your team, completed
  3. InviteAdd people
  4. PlanChoose a plan, not started
Show the code

Links, code

const steps: Step[] = [
  { label: 'Account', description: 'Name and email' },
  { label: 'Workspace', description: 'Name your team' },
  { label: 'Invite', description: 'Add people' },
  { label: 'Plan', description: 'Choose a plan' },
];

<Steps current={3} steps={steps.map((s, i) => ({ ...s, href: `#step-${i + 1}` }))} />

Tokens

The 15 design tokens Steps reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 15 tokens
Tokens Steps reads
TokenValue nowCSS variable
color.action.primary…--sd-color-action-primary
color.bg.canvas…--sd-color-bg-canvas
color.bg.subtle…--sd-color-bg-subtle
color.border.control…--sd-color-border-control
color.border.danger…--sd-color-border-danger
color.icon.danger…--sd-color-icon-danger
color.text.brand…--sd-color-text-brand
color.text.default…--sd-color-text-default
color.text.on-primary…--sd-color-text-on-primary
color.text.secondary…--sd-color-text-secondary
radius.full…--sd-radius-full
shape.radius-control…--sd-shape-radius-control
spacing.gap.md…--sd-spacing-gap-md
spacing.gap.sm…--sd-spacing-gap-sm
target.min…--sd-target-min

Install

The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).

Install

npm i @superduperui/react @superduperui/tokens

Import

import { Steps } from "@superduperui/react"

Props

Steps also takes the props of the React Aria component it’s built on.

Steps props
PropTypeWhat it does
stepsrequiredStep[]
currentrequirednumberThe current step, 1-based. Steps before it are complete.
onStepPress(step: number) => voidButton mode: called when a completed step is chosen.
aria-labelstringDefault 'Progress'Names the list. Default "Progress".
orientation'horizontal' | 'vertical'Default 'horizontal'
classNamestring

When to use it

Use it for

  • Sign-up, checkout and set-up flows of 3 to 6 steps

Use something else for

  • Where you are in the site: use Breadcrumb
  • A single progress figure: use Progress

Accessibility

Screen readers announce "Progress, list, 4 items" then "Account, completed, button" and "Invite, current step".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.

Compact density meets AA (2.5.8, 24px targets), not AAA.

What your product still has to do

  • Keep entered data when people go back a step

Shared patterns it ships with: 2.4.8 (aria-current="step").

This release’s test results

Test results for Steps in this release
axe-core (WCAG A, AA, AAA and best practice)100 runs across every story, theme, density and width: 0 violations
Rendered text contrast560 text runs: 0 below 7:1, lowest 8.4:1
Target size22 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)36 focus stops in 3 browser engines: all pass
Keyboard scriptChromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

Steps keyboard steps
KeyWhat happens
TabTab reaches the first completed step
TabTab reaches the second completed step
Shift+TabThe current and upcoming steps are not stops; Shift+Tab goes back

In Figma

The Figma component is Steps, with Orientation (Horizontal, Vertical); Count (2, 3, 4, 5, 6). The Figma library isn’t published yet.

Figma to code: Orientation → orientation (Horizontal = "horizontal", Vertical = "vertical"); Current → current; Count (2, 3, 4, 5, 6; preview only); nested Step → steps.