A toggle paired with a label and an optional subtext message, in a single row. 18 variants mirroring the Toggle atom — State (Default / Pressed / Disabled) × Size (Large / Medium / Small) × isSelected (true / false) — nesting the Toggle instance plus a #label and a composed Subtext Message.
Rebuilt — real component, in sync with the atom
Promoted from a static frame to a real component that nests the Toggle atom as an instance and adds a
#label plus a composed Subtext Message. Schema mirrors the atom exactly — State (Default / Pressed / Disabled) × Size × lowercase isSelected. The one remaining item is the subtext: it is currently always present (showing error copy even at rest), and should become a show/hide boolean bound to the Subtext Message's visibility so it appears only when there is helper or error text.In Context
Labeled toggle is the primary form of Toggle shown in product. Settings rows, feature opt-ins, biometric/notification preferences — nearly all consumer-facing toggles are labeled.
Live Preview
Push notifications
Get alerts when money moves
Content
label
description
Properties (proposed)
isSelected
state
placement
required
helper
DS Health
Reusable
Pass
A real component now — full 18-variant property surface (
State × Size × isSelected), with an editable #label and a composed Subtext Message. Drops into settings rows, form opt-ins, and list items without detaching.Self-contained
Pass
Carries its own label typography and row layout, token-bound. The toggle and the subtext are both real instances, so their styling flows from the canonical components.
Consistent
Pass
Schema mirrors the Toggle atom exactly and follows the Radio Button With Label pattern (real component, label + subtext). The one gap: the Subtext Message is always present rather than gated by a show/hide boolean, so a plain row renders error copy at rest. C2
Composable
Pass
Nests the canonical
Toggle instance (atom changes propagate) and a Subtext Message instance for helper/error text. Both compose cleanly rather than being redrawn.Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Off / On | Yes | Yes | isSelected=false / true | Label left, nested Toggle right. The toggle reflects the row's isSelected. |
| Pressed | Yes | Yes | State=Pressed | Pressed feedback on the toggle; the whole row is the intended tap target on native. |
| Disabled | Yes | Yes | State=Disabled | Toggle and label both mute. No Pressed pairing, matching the atom. |
| Subtext / error message | Yes | Yes | Subtext Message instance | Helper or error text below the row via a composed Subtext Message. Currently always shown — should become a show/hide boolean so it appears only when needed. |
Issues
- Code Connect mappings not registered. Structure and schema are settled. Registration is unblocked but the SwiftUI / Compose mappings are not yet wired and the native component does not exist — snippets remain a Planned API. C7 · Code Connect Linkability
- v2.0: Promoted from a static frame to a real component — it now has a full property surface (
State×Size×isSelected) and an editable#label, so consumers no longer detach and rebuild. (C2) - v2.0: Composes the canonical Toggle as a real instance (linked to the local atom), so atom changes propagate to the labeled row. (C4)
- v2.1: Schema aligned to the Toggle atom —
State(Default / Pressed / Disabled) with pressed folded in, and lowercaseisSelected=true/false. 18 variants, mirroring the atom. (C2) - v2.1: Helper / error text moved to a composed
Subtext Messageinstance rather than a separatehasErrorTextvariant axis — fewer variants, and the message inherits the canonical component. (C2) - v2.1: The always-present
Subtext Messageconfirmed intentional — reviewed and accepted as a standing part of the labeled row, not gated behind a boolean. (C2)
Recommendations
- Register Code Connect mapping to
EBToggleRow. WireState,Size, andisSelected1:1, forwarding them to the nestedEBToggle, and expose the label + subtext as content. Docs
- Promote from frame to a real component. v2.0: Applied — full 18-variant property set, editable label, nested Toggle instance. Composition
- Inherit Toggle state + size from the inner instance. v2.1: Applied —
StateandSizemirror the atom and forward down to the nested Toggle. Property - Add helper / error text. v2.1: Applied via a composed
Subtext Messageinstance rather than a variant axis (visibility gating still to add). Slot
Styles
Today — single frame
DES DEV
A 180×24 layout frame: Toggle instance on the left of its auto-layout, "Label" text on the right. No property set, no variants — functionally identical to placing a Toggle + Text next to each other on a canvas.
Label
Properties
Placement
isSelected
State
Properties
None No property set
Colors
Track #005CE5
Indicator #FFFFFF
Label #445C85
Layout
Width 180 (fixed)
Height 24
Gap space/space-8
Typography
Label style Primary/Label/Light/Base
Label font Proxima Soft Semibold · 16 / 16 · +0.25
Active — Colors
Toggle in the on position with a leading label.
| Role | Token | Default |
|---|---|---|
| Track | toggle/color/default/active/bg-track | #005CE5 |
| Indicator | toggle/color/default/active/bg-indicator | #FFFFFF |
| Label | text/color-text-weak | #445C85 |
Proposed — trailing placement proposed
DES DEV
Default arrangement: label stack on the left, toggle on the right. Matches iOS Form and Material 3 list-item patterns.
Push notifications
Get alerts when money moves
Properties
Placement
isSelected
State
Properties
Placement trailing
isSelected true
State default
Colors
Label color #0A2757
Track #005CE5
Indicator #FFFFFF
Layout
Row height 40
Gap 12
Toggle size 48 × 24
Knob size 20 × 20
Typography
Label style Body/Medium
Font Proxima Soft
Size 14
Line-height 20
Inactive — Colors
Toggle in the off position with a leading label.
| Role | Token | Default |
|---|---|---|
| Track | toggle/color/default/inactive/bg-track | #C2CFE5 |
| Indicator | toggle/color/default/inactive/bg-indicator | #FFFFFF |
| Label | text/color-text-weak | #445C85 |
Proposed — leading placement proposed
DES DEV
Inverse arrangement: toggle on the left, label stack on the right. Useful in inline form layouts where labels are right-heavy.
Remember me
Properties
Placement
isSelected
State
Properties
Placement leading
isSelected false
State default
Colors
Track #005CE5
Indicator #FFFFFF
Label #445C85
Layout
Track size 40 × 24
Indicator size 20 × 20
Padding V 12px
Gap (label ↔ toggle) 12px
Typography
Label style Primary/Label/Light/Base
Label font Proxima Soft Semibold · 16 / 16
Inverse — Colors
Toggle with a navy label for use on dark surfaces or accent contexts.
| Role | Token | Default |
|---|---|---|
| Label | main/toggle-with-label/label | #0A2757 |
| Track | toggle/color/default/active/bg-track | #005CE5 |
| Indicator | toggle/color/default/active/bg-indicator | #FFFFFF |
Property Mapping
| Figma Property | SwiftUI | Compose |
|---|---|---|
label: String | label: String | label: String |
description?: String | description: String? | description: String? |
isSelected: true | false | @Binding var isOn: Bool | checked: Boolean |
placement: leading | trailing | placement: EBTogglePlacement | placement: EBTogglePlacement |
required: boolean | required: Bool | required: Boolean |
helper?: String | helper: String? | helper: String? |
error?: String | error: String? | error: String? |
State (inherited) | .disabled(true) / .ebState(.error) | enabled / error |
Accessibility
| Requirement | iOS | Android |
|---|---|---|
| Label ↔ Toggle link | VoiceOver announces label + state in one utterance ("Push notifications, on"). | TalkBack announces label + state in one utterance. Use Modifier.toggleable on the row. |
| Whole row tappable | Row wrapped in Button or .onTapGesture that toggles. | Row uses Modifier.toggleable, merging semantics. |
| Description announced | Combine label + description with .accessibilityElement(children: .combine). | Merge descendants, description as stateDescription or second line. |
| Required marker | Announce "required" after the label. | Append "required" to contentDescription. |
| Error | Error text linked via .accessibilityHint; announce on state change. | Error text in error semantics; TalkBack reads on focus. |
Criteria Scorecard
| ID | Criterion | Status | Notes |
|---|---|---|---|
| C1 | Layer Structure & Naming | Requires Rework | Not a component — just a layout frame. Promote to real component. |
| C2 | Variant & Property Naming | Requires Rework | No properties. Add label, description, placement, required, helper, error. |
| C3 | Token Coverage | Ready | Label typography and color bound via Toggle + Text styles. |
| C4 | Native Mappability | Requires Rework | Cannot map a frame. Once built, maps to Toggle inside LabeledContent on iOS, Row with Modifier.toggleable on Compose. |
| C5 | Interaction State Coverage | Requires Rework | Need Default, Pressed (row), Disabled, Error. |
| C6 | Asset & Icon Quality | Not Applicable | No assets. |
| C7 | Code Connect Linkability | Not Mapped | Blocked until component exists. |
Variants Inventory (1 total)
Today: 1 layout frame. Proposed: placement (leading/trailing) × description (yes/no) × required (yes/no) × state (5) = 40 variants. May simplify by treating required and description as runtime props rather than Figma variants.
| # | Node | Dimensions | Contents |
|---|---|---|---|
| 1 | 18482:36538 | 180 × 24 | Toggle instance + "Label" text · auto-layout row |
1.0.0 — April 2026Major
Initial Assessment · node 18482:36538
Verdict: Restructure — Not a real component. Promote to a proper component with label, description, helper/error, required marker, and leading/trailing placement. Open
ArchitectureFamily alignment — Match Radio Button With Label's shape. Inherit Toggle's
FamilyisSelected, State, Size from the inner Toggle instance. OpenC7 — Code Connect — Blocked until component exists. Open
C7