Step Indicator

Progress states — currentStep = 0 · 1 · 2 · 3

currentStep is a zero-based index. Steps before it render as done (success tint + checkmark), the index itself is active (primary tint), and later steps stay muted. The connector between two completed steps tints to success so the eye traces progress along the bar.

Sizes — sm · md · lg

Three sizes scale the circle (24/32/40px), step number, label, and check icon together. Use sm when the indicator sits inside a Drawer or a narrow form, md as the default for wizards, and lg when the indicator is the hero element of an onboarding flow.

Vertical orientation — sidebars & mobile

Pass orientation="vertical" for sidebar wizards or mobile screens where the horizontal bar would push labels off-screen. The connector flips to a vertical line in the circle column; labels sit on the inline-end side.

Interactive — jump back to a completed step

Pass onStepClick to make done and active steps clickable. Upcoming steps stay inert — users can't jump ahead. Each clickable step renders as a real <button> with a focus ring, hover state, and aria-current="step" on the active row.

Per-step icon & error status

Each step accepts an optional icon for a topic glyph in place of the number, or status: "error" to mark a failed validation. Error steps tint destructive (circle + connector + label) regardless of their progress position.