progress indicator

the header progress for FormShell. two variants today: linear (a thin filled bar with a percentage and current-step label) and stepped (discrete dots for short flows).

omit the label to auto-generate one from the steps array ("3 of 21 · body metrics") or the value ("15%"). an optional domain pill renders to the left of the label.

import from @klera/ui/components/forms/ProgressIndicator

API: <ProgressIndicator variant value steps label domain />. variant defaults to linear. value is 0–100 (required for linear, computed from steps for stepped).steps is { key, label, status: "done" | "current" | "upcoming" | "skipped" }[].

variants

linear · explicit value

clinicalstep 4 of 21 · body metrics

linear · computed from steps

4 of 6 · body metrics

no value supplied — bar fills based on done count + current at 0.5x. label and domain auto-rendered.

stepped · 6 steps

3 of 6 · basic identity

best for short flows. dots color-coded by status: brand-primary (done), brand-sky (current), bg-panel (upcoming/skipped).

stepped · with skipped step

3 of 5 · contraindications

skipped status renders dim — useful when visibility rules cut a step out of the flow.

linear · complete

complete