Stepper

stable

Multi-step progress indicator with horizontal/vertical orientation and step status tracking

Navigation/Storybook ↗

import { Stepper } from "@nodus/design-system"

Demo coming soon

Props

Prop	Type	Default	Description
`steps`req	`StepItem[]`	—	Array of step definitions with label and optional description
`activeStep`req	`number`	—	Zero-based index of the current step
`orientation`	`"horizontal" \| "vertical"`	"horizontal"	Layout direction
`size`	`"sm" \| "md" \| "lg"`	"md"	Overall sizing

stepsrequired

Type StepItem[]Default —

Array of step definitions with label and optional description

activeSteprequired

Type numberDefault —

Zero-based index of the current step

orientation

Type "horizontal" | "vertical"Default "horizontal"

Layout direction

size

Type "sm" | "md" | "lg"Default "md"

Overall sizing

Accessibility

Uses <nav aria-label="Progress"> landmark
Steps wrapped in <ol> with aria-label="Step N of M"
aria-current="step" on active step
Connectors are aria-hidden

Metadatasmmdlgsemantic type border outcome temporal

Design Rationale

This component was designed to express:

View all principles →

Explore Related

Hierarchical navigation trail with configurable separator, overflow collapse, and semantic markup

Determinate or indeterminate progress bar

Was this helpful?