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 @halwel/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