A row of numbered circles whose ring arcs indicate progress through a multi-step flow.
Consolidate — merged into Stepper
This component no longer exists on its own. It is merged into Stepper (node
4337:11140), where its nine step-count siblings are now the Steps axis and the circular form is Type=Circular. Assessment for this pattern lives on the Stepper page.In Context
Stepper - Circular appears at the top of multi-step flows (onboarding, KYC, form wizards) to show position and total count. Consumers pair it with a screen title and step-specific content.
Live Preview
1
2
3
4
Content (proposed)
steps
current
value2 of 4
DS Health
Reusable
Partial
Historical rating from the standalone assessment. This component is merged into Stepper — see that page for current DS Health.
Self-contained
Warn
Historical rating from the standalone assessment. This component is merged into Stepper — see that page for current DS Health.
Consistent
Fail
Historical rating from the standalone assessment. This component is merged into Stepper — see that page for current DS Health.
Composable
Partial
Historical rating from the standalone assessment. This component is merged into Stepper — see that page for current DS Health.
Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Completed step | Yes | Yes | ring = full | Step index < current. Full ring fill in brand blue, number in brand blue. |
| Current step | Yes | Yes | ring = partial arc | Step index = current. Arc fills current / steps of the ring; number in brand blue. |
| Upcoming step | Yes | Yes | ring = track only | Step index > current. Track-only ring in light blue; number still in brand blue. |
| Clickable / interactive | N/A | N/A | Not modeled | Some wizards let the user tap a completed step to go back. No pressed / focused state exists today; add if interactive behavior is desired. |
| Vertical orientation | N/A | N/A | Not modeled | Horizontal only. Vertical steppers (common on narrow screens or list layouts) would need a second orientation mode or a sibling. |
Issues
- Merged into Stepper. v2.0: Confirmed by the component owner — this no longer exists as a standalone component. It is merged into Stepper (node
4337:11140), where its nine step-count siblings are now theStepsaxis and the circular form isType=Circular. This page is kept as a pointer; all assessment for this pattern lives on Stepper. (Family) C4 · Native Mappability
1.0.1 — September 2026Patch
Documentation backfill · node 27:47768
Resolved issues recorded. 1 resolved issue on the Overview tab had no changelog row: Merged into Stepper.
Docs1.0.0 — April 2026Major
Initial Assessment · canonical node 27:47768 (10 Steps) + 8 siblings
Verdict: Restructure — Collapse 9 sibling components (
SchemaStepper - Circular - 2…10 Steps) into one Stepper - Circular with steps: Int and current: Int properties. Replace raster ring arcs with stroked SVG / Canvas. OpenC1 — Family structure — 9 top-level components differ only by hardcoded step count. Collapse into a single component with a
C1steps property. Rename step-container layer → Ring. OpenC2 — Property shape — Inner
C2number = 1…N conflates digit label and arc-fill rendering. Split into index (label) + status (ring treatment). Lift current and steps to the parent component. OpenC4 — Native mapping — No native primitive matches. Requires custom
C4EBStepperCircular on both platforms built over HStack/Row of stroked circles. OpenC5 — Missing states — Add pressed / focused for interactive steps, vertical orientation, and check-on-complete option. Open
C5C6 — Raster arcs — Each step's ring is a pre-baked PNG. Replace with stroked SVG circles bound to
C6main/stepper/color/bg-track and main/stepper/color/bg. OpenC7 — Code Connect — Mappings pending restructure. Mapping 9 separate siblings would codify the anti-pattern. Open
C7