Stepper
No reference page demonstrates this component — it was inferred from the screens that use one, so there is no variant matrix behind it.
Usage
Position within a multi-step process. Supports two modes deliberately: the reference's checkout shows a four-step indicator while putting every section on one page — decorative, with no step state behind it — and that is a legitimate pattern for short forms. `interactive` adds real navigation for flows where steps are conditional or validation is expensive.import { Stepper } from '@summonware/ui';Best practices
DoDrive `current` from actual completion state, not from a counter you increment on submit.
DoLeave `interactive` off when every step is visible on one page — there is nowhere to navigate to.
Don'tAllow jumping forward past incomplete steps. Only steps at or before `current` are clickable, by design.
Don'tUse more than about five steps. Past that the connectors compress and labels stop fitting.
Anatomy
Indicator *The numbered circle, which becomes a check once the step is behind you.
LabelHidden below the `sm` breakpoint — four labelled steps need roughly 510px and overflow a 390px screen. The circles and connectors still convey position.
ConnectorThe rule between steps, filled in primary once complete.
Examples
Common configurations, variations and states.Progress through a flow
Step two of four. Completed steps show a check and a filled connector; the rest stay muted.
Final step
A shorter three-step flow on its last step — the shape an approval or review process usually takes.