Stepper

A stepper shows where someone is in a multi-step flow: completed steps, the current step, and what is still ahead.

Anatomy

Step states

Each step shows a 1-based index (or check when done) and a label. Spacing between index and label matches Figma (6px).

Upcoming, active, complete

Enter step name

Pattern

Steps are separated by chevrons with 16px gaps between items, matching the full stepper frame in Figma.

Five steps (placeholder labels)

Interactive

Active step: review — click a step to move the current marker (demo only).