Step Progress
premiumVisual step indicator with 3 variants: steps, numbers, or percentage.
Overview
The Step Progress component shows users where they are in a multi-step form. Supports three display variants: circle step indicators with connectors, a text counter ("Step 2 of 5"), or a percentage display ("40% complete").
Properties
| Property | Type | Default | Description |
|---|---|---|---|
formId | String | "default" | Must match the formId of your Multi-Step component. |
variant | Enum | "steps" | "steps" (circle indicators), "numbers" (text counter), or "percentage" (% complete). |
labels | Array | -- | Custom label for each step (only shown in steps variant). |
Features
- 3 variants: circle steps, text counter, percentage
- Horizontal or vertical step layout
- Active/completed/inactive step states with separate styling
- Step connectors with customizable appearance
- Label position: bottom or right of each step circle
Tips
Use the "steps" variant for forms with 3-5 steps. For longer forms, "numbers" or "percentage" is cleaner.
Add labels to give each step a meaningful name (e.g., "Personal Info", "Payment").