Form

Toggle.Group

View in Figma

A labeled row that pairs a title and optional subtitle with a Toggle control. Composes a content block on the left and a toggle on the right, separated by a gap token, within a single horizontal slot.

Overview

A labeled row that pairs a title and optional subtitle with a Toggle control. Composes a content block on the left and a toggle on the right, separated by a gap token, within a single horizontal slot.

Push notificationsReceive alerts for activity

Anatomy

ToggleGroup
Push notificationsReceive alerts for activity
  1. 1root  required  Horizontal slot container (Figma: Root slot). Holds the content block and toggle side by side with a spacing.gap.positive.xl gap.
  2. 2container-content  required  Vertical stack holding Label.Title and Label.Subtitle. Expands to fill remaining width.
  3. 3label-title  required  Primary label text. body.md.regular in color.content.primary.
  4. 4label-subtitle  Secondary descriptor text. body.sm.regular in color.content.secondary.
  5. 5container-toggle  required  Vertical stack wrapping the Toggle instance. Fixed width, does not grow.
  6. 6toggle  required  The Toggle switch instance (Form / Toggle). Track and knob tokens mirror form/toggle.

Measurements

Push notificationsReceive alerts for activity
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Spacing
Top and bottom padding on the root slot
spacingPaddingSm
4pt
Gap between the content block and the toggle
spacingGapPositiveXl
12pt
Label
Label.Title text fill
colorContentPrimary
#0C1828
Label.Subtitle text fill
colorContentSecondary
#6D747E
Toggle
Toggle track fill when off
colorBackgroundTertiary
#B6BABF
Toggle track fill when on
colorBackgroundAccentPrimary
#4B56C7
Toggle knob fill
colorContentOnDark
#FFFFFF

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
Container.BodyslotSlot

Accessibility

Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.