Form

Toggle

View in Figma

A switch that flips a single setting on or off. On fills the track with the accent color and slides the knob right; off shows a neutral track with the knob left.

Overview

A switch that flips a single setting on or off. On fills the track with the accent color and slides the knob right; off shows a neutral track with the knob left.

Variant
Off

The off variant.

Variants and states

defaultdisabled
off
on

Anatomy

Toggle
  1. 1container  required  The switch control. Dims to the disabled opacity when off for interaction.
  2. 2track  required  The pill background. Neutral when off, accent when on.
  3. 3knob  required  The rounded handle. Sits left when off and right when on.

Measurements

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.

Container
Track and knob corner radius
radiusPill
Pill
Track
Track fill when off
colorBackgroundTertiary
#B6BABF
Track fill when on
colorBackgroundAccentPrimary
#4B56C7
Knob
Knob fill
colorContentOnDark
#FFFFFF
State
Whole control opacity when disabled
literal value
0.32

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
platformvariantiOS, Android
isSelectedvariantfalse, true
isDisabledvarianttrue, false

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.