Progress Bar
premiumLinear progress bar showing form completion.
Overview
The Progress Bar displays form completion as a linear bar that fills as users advance through steps. Supports labels above or below the bar in count ("Step 2 of 5") or names format (step labels spread across the bar).
Properties
| Property | Type | Default | Description |
|---|---|---|---|
formId | String | "default" | Must match the formId of your Multi-Step component. |
showLabels | Boolean | true | Show step labels. |
labelPosition | Enum | "top" | "top" or "bottom" of the bar. |
labelFormat | Enum | "count" | "count" (Step X of Y) or "names" (custom step labels). |
labels | Array | -- | Custom label for each step (used in "names" format). |
Features
- Linear progress bar with animated fill
- Labels: count format or named steps
- Active step label highlighting
- Custom bar height, radius, and colors
Tips
Use "names" label format to show step names across the bar (e.g., "Info — Payment — Confirm").