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
Styles
Stepper - Circular
DES DEV
Row of N 45×45 numbered circles, each with a ring that indicates position through the flow. 9 hardcoded sibling frames today; target is one component with a <code>steps</code> prop.
1
2
3
4
Properties (proposed)
steps
current
Properties
Step counts 2–10
Variant Circular
Number style Primary/Headlines/Block
Colors
Active label #005CE5
Active arc #005CE5
Inactive arc #D2E5FF
Layout
Step circle size 45 × 45
Ring stroke width 2
Gap between circles 20
Typography
DS style Primary/Headlines/Block
Font Proxima Soft Bold
Size 18
Line height 23
Tracking 0.25
Stepper Circular — Colors
Circular ring progress indicator with a numeric step label inside.
| Role | Token | Default |
|---|---|---|
| Active label | stepper/color/label | #005CE5 |
| Active arc | stepper/color/bg | #005CE5 |
| Inactive arc | stepper/color/bg-track | #D2E5FF |
Property Mapping
| Figma Property | SwiftUI | Compose |
|---|---|---|
Stepper - Circular - N Steps (×9 siblings) | Stepper - Circular (single component) | EBStepperCircular |
| (implicit in sibling name) | steps: 2…10 | total: Int |
(implicit in number variant) | current: 1…steps | current: Int |
number = 1 | … | N (inner symbol) | index: Int + status: completed | current | upcoming | (derived internally from current) |
| (horizontal only) | orientation: horizontal | vertical | orientation: Axis = .horizontal |
| (raster arc) | Stroked SVG / Canvas arc | Circle().trim(from: 0, to: progress).stroke(...) |
Accessibility
| Requirement | iOS | Android |
|---|---|---|
| Progress role | Wrap the row in .accessibilityElement(children: .ignore) and expose a single label. Set .accessibilityValue("Step \(current) of \(total)"). | Treat the row as a single semantic node via Modifier.semantics(mergeDescendants = true) with contentDescription = "Step $current of $total". |
| Value announcement | VoiceOver reads "Step 2 of 4". Avoid announcing each circle individually — it's noisy and position-less. | TalkBack reads the merged label. Update stateDescription when current changes to trigger re-announcement. |
| Icon-only digits | The digit itself is already semantic. Ensure contrast: #005CE5 on white = 5.3:1 ✓ | Same. Digit color passes WCAG AA for non-text graphics. |
| Interactive steps | If completed steps are tappable, wrap each in a Button with .accessibilityHint("Tap to return to step \(index)"). Pressed state inherits from the button. | Use Modifier.clickable(onClickLabel = "Return to step $index"). Ripple indication appears natively. |
| Contrast | Ring fill #005CE5 on track #D2E5FF = 3.1:1 — passes 3:1 for non-text graphics (WCAG 1.4.11). OK. | Same ratio. |
Criteria Scorecard
| ID | Criterion | Status | Notes |
|---|---|---|---|
| C1 | Layer Structure & Naming | Requires Rework | Step count is modeled as 9 sibling components instead of a property. Collapse to a single Stepper - Circular. Also rename step-container → Ring. |
| C2 | Variant & Property Naming | Requires Rework | Inner number axis conflates digit label and ring-arc rendering. Split into index + status (and lift current / steps to the top-level component). |
| C3 | Token Coverage | Ready | All colors bound to main/stepper/color/{bg, bg-track, label}. Typography bound to Primary/Headlines/Block. Gap bound to space/space-20. |
| C4 | Native Mappability | Requires Rework | No native primitive matches. Requires a custom EBStepperCircular. Today's raster arcs block direct primitive composition. |
| C5 | Interaction State Coverage | Requires Rework | No pressed / focused / disabled / tappable-completed state modeled. Missing vertical orientation and check-on-complete variants. |
| C6 | Asset & Icon Quality | Requires Rework | Ring arcs are raster <img> — one PNG per step index per sibling component. Replace with stroked SVG / Canvas arcs. |
| C7 | Code Connect Linkability | Not Mapped | Blocked until 9 siblings collapse into one component and raster arcs are replaced with vector strokes. |
Variants Inventory (0 total)
Today: 9 sibling components, one per hardcoded step count. Each sibling contains N step symbols (number = 1 … N) with baked raster ring arcs. Sum of step symbols: 2+3+4+5+6+7+8+9+10 = 54 step symbols (+ 9 outer frames = ~63 nodes). Target: 1 component with steps: 2…10 and current: 1…steps as runtime properties; ring arcs drawn by math, not asset.
| # | Sibling component | Node | Frame width | Step symbols |
|---|---|---|---|---|
| 1 | Stepper - Circular - 2 Steps | 27:48036 | 150 | 2 (number = 1, 2) |
| 2 | Stepper - Circular - 3 Steps | 27:48020 | 215 | 3 |
| 3 | Stepper - Circular - 4 Steps | 27:47999 | 280 | 4 |
| 4 | Stepper - Circular - 5 Steps | 27:47973 | 345 | 5 |
| 5 | Stepper - Circular - 6 Steps | 27:47942 | 410 | 6 |
| 6 | Stepper - Circular - 7 Steps | 27:47906 | 475 | 7 |
| 7 | Stepper - Circular - 8 Steps | 27:47865 | 540 | 8 |
| 8 | Stepper - Circular - 9 Steps | 27:47819 | 605 | 9 |
| 9 | Stepper - Circular - 10 Steps | 27:47768 | 670 | 10 (number = 1…10) |
1.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