Stepper
Progress through a multi-step flow, such as a form wizard or checkout.Horizontal
Preview
Code
- Step 3 of 3: Review, not startedCheck and submit
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Stepper } from '@advui/core'
<Stepper activeStep={1}>
<Stepper.Step title="Organization" description="Name and type" />
<Stepper.Step title="Activities" />
<Stepper.Step title="Review" />
</Stepper>Examples
Vertical, with content
The third step shows the error status.Preview
Code
- Step 1 of 4: Choose a template, completedMonthly 5W report
- Step 2 of 4: Add the reporting period, current
- Step 3 of 4: Upload the data, not started
- Step 4 of 4: Publish, not started
API reference
Stepper
| Prop | Type | Default | Description |
|---|---|---|---|
activeStep required | number | — | Index of the current step, from 0. Earlier steps are complete. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Vertical steps can show the current step’s content under it. |
onStepPress | (index: number) => void | — | Makes steps buttons that go back (or anywhere, with `linear={false}`). |
linear | boolean | true | Only steps up to the current one can be pressed. |
labels | Partial<StepperLabels> | — | Screen-reader text ("Step 2 of 3", "completed"…), for translation. |
Stepper.Step
| Prop | Type | Default | Description |
|---|---|---|---|
title required | ReactNode | — | Name of the step. |
description | ReactNode | — | Muted line under the title. |
status | 'complete' | 'current' | 'upcoming' | 'error' | from `activeStep` | Override, e.g. `error` for a step that failed validation. |
children | ReactNode | — | Vertical only: shown under the step while it is current. |
Accessibility
- An ordered list; each step reads its number, title and status ("Step 1 of 3: Organization, completed"). Set
labelsto translate. - The current step has
aria-current="step"on web. - Markers and lines are hidden; status is never color alone (numbers, a check, a cross and the words).
- With
onStepPress, reachable steps are buttons; the others stay plain text.
| Key | Action |
|---|---|
| Tab | Moves between pressable steps. |
| Enter / Space | Goes to the focused step. |
Responsive behavior
Below the xs breakpoint a horizontal stepper shows only the current step’s text next to the markers (the rest stays readable by screen readers). With more than four steps, use orientation="vertical" on phones.
Platform notes
Web
The step number and status are visually hidden text.
iOS
Each step is one accessible element whose name holds the number, title, status and description (when they are text).
Android
Same as iOS.