Stepper

Stepper

<Stepper
  current={2}
  steps={[
    { id: 'profile', label: 'Profile' },
    { id: 'verify',  label: 'Verify',   description: 'Email + phone' },
    { id: 'plan',    label: 'Plan' },
    { id: 'review',  label: 'Review' },
  ]}
/>

{/* Vertical, with explicit statuses (skips auto from `current`) */}
<Stepper
  orientation="vertical"
  steps={[
    { id: 'a', label: 'Sign up',     status: 'done' },
    { id: 'b', label: 'Verify email', status: 'done' },
    { id: 'c', label: 'Pick a plan', status: 'current' },
    { id: 'd', label: 'Invite team', status: 'pending' },
  ]}
/>

Install: @helixui/core

import { Stepper, type StepperStep } from '@helixui/core'

status: stable · since: 0.5.0

Tags: steps, wizard, progress, multi-step

Anatomy

(✓ done) ── (● current) ── (○ pending) ── (! failed)

Layout

• display — flex
• width — fill
• height — content
• intrinsicSize — horizontal or vertical, fills container
• stackable — false
• fullBleed — false

Visual

A row (or column) of circular step indicators connected by lines. Done shows a check on a brand fill; current is a brand ring; pending is muted; failed uses danger tone.

Props

Name	Type	Default	Description
steps	StepperStep[]	—	Required. Each has id, label, optional description and explicit status.
current	number	—	Index of the current step. Auto-fills status: done before, current at, pending after.
orientation	'horizontal' | 'vertical'	horizontal	Layout.

Tokens used

color.bg.surface.default, color.bg.action.brand.default, color.bg.action.brand.subtle, color.bg.action.danger.default, color.border.default, color.border.strong, color.text.primary, color.text.secondary, color.text.muted, color.text.on.brand, color.text.on.danger, space.1, space.2, space.3, font.family.sans, font.size.xs, font.size.sm, font.weight.medium, font.weight.semibold

Accessibility

Notes

• Renders as <ol>. The current step has aria-current="step".
• For onboarding, pair with focus management — focus the heading of the active step on mount.

Composes with

Component	Relation	Note
Form	sibling	Often above a multi-step Form.
PinInput	sibling
NumericKeypad	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

onboarding progress

“3-step stepper, on step 2”

<Stepper current={1} steps={[
  { id: 'account', label: 'Account' },
  { id: 'profile', label: 'Profile' },
  { id: 'done', label: 'Finish' },
]} />

Related

• PinInput
• NumericKeypad