A toggle paired with a label and optional helper text in a single row.
Restructure — promote from frame to real component
Add a property set:
label, optional description, optional helper/error text, required marker, placement = leading | trailing, and inherit Toggle's state + size from the inner Toggle instance. Once built, drop-in for settings rows, form opt-ins, and list items.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
Fail
Not reusable in its current form — consumers can't set the label, can't add description, helper, or required marker. They must detach and rebuild.
Self-contained
Fail
No properties, no slots. Just a frame with a static Toggle + text.
Consistent
Fail
Breaks the pattern established by Radio Button With Label (real component with label + description) and Labeled Field.
Composable
Warn
Child Toggle is an instance — at least the composition is correct. But the wrapper has no slot / property surface to expose.
Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Default | Yes | Yes | Frame only | Today: one static instance. Proposed: Toggle + label rendered in row. |
| Pressed | N/A | N/A | Not built | Tapping label should also toggle — entire row is the tap target. |
| Disabled | N/A | N/A | Not built | Label dims to secondary when toggle is disabled. |
| Error | N/A | N/A | Not built | Required toggle + form submit shows error text below label. |
Open Issues
- Not a real component. Layout frame with a Toggle + text, no properties or variants. Promote to a proper component. C1 · Layer Structure & Naming
- No slots. Cannot set label, add description, mark required, or show helper/error. C2 · Variant & Property Naming
- No placement option. iOS Form convention is trailing toggle; Material 3 allows either. Need
placement = leading | trailing. C4 · Native Mappability - No state coverage. Pressed row, disabled label, error visual all missing. C5 · Interaction State Coverage
- No Code Connect mapping. Blocked until component exists. C7 · Code Connect Linkability
Design Recommendations
- Build as a real component with property set:
label,description?,helper?,error?,required: boolean,placement = leading | trailing. InheritisSelected,State,Sizefrom the inner Toggle via instance-swap. Composition - Match Radio Button With Label's shape for consistency — same label/description layout, same required marker, same error styling. Selection controls should read alike. Family
- Whole-row tap target. Tapping the label or the description should toggle the switch — the entire row is the hit region. Matches iOS Form and Material 3 list-item behavior. State
- Consider a List Row wrapper that adds full-width chrome (dividers, padding) for use inside Settings screens. Today this shape would be built ad-hoc per screen; a dedicated variant makes Settings screens trivially composable. Family
- See: Toggle for the base control, Radio Button With Label for the target shape. Family
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