Toggle
Toggle turns a single setting on or off, and applies the change immediately.
Preview
Default, active. A 44 by 28 track carrying a 22px handle, centred in a 44px target, so the thing you can hit is bigger than the thing you can see. Click it.
The 44 frame is the target and the control inside it is 44 by 28, sitting 8 from the top and 8 from the bottom, so the width is identical and only the height has slack. The handle is a 22 circle inset 3 on every side, which puts it at 3 when off and 19 when on: 16 of travel. Two shadows sit under it, both black, one at 4 percent and one at 1.
State
Three states across two active values. Pressed shifts the track while the finger is down, so the track confirms the touch before the value changes.
Six variants, State by Active, no holes, and the track fill carries all of it. Off is bg/soft-100, on is brand/base, and pressed steps each along its own ramp: bg/sub-200 when off, brand/dark when on. Disabled ignores Active and paints bg/soft-100 both ways, so only handle position separates a disabled on from a disabled off. The handle drops both shadows there too. One drift: pressed while on puts the handle at 19.25 by 2.75 where every other variant has it at 19 by 3.
Label
The label is its own component, so the track stays a track. Align puts it on either side, and the description can be switched off. All three switch.
The row is 340 by 48: a 44 control, 16 of gap, 280 of text. The height comes from the text, not the control, 28 for the title at 18/28 Semi Bold plus 20 for the description at 14/20, so switching Show Description off takes the row to 28 while the control stays 44. Align swaps the order of the two children, it does not flip a layout property, so the gap sits inside either way.
Properties
Two sets: the track, and the label that carries it.
Two component sets, not one. Toggle is six variants of State by Active and carries no text. _Toggle Label is two variants of Align and holds Label, Description and Show Description. The underscore keeps it out of the Assets panel, so place a Toggle and switch to the label variant to reach it. Its description asks for the whole row to be the tap target, more than the 44 the control draws.
Tokens
Every value the toggle reads, resolved through its aliases to the primitive underneath.
Four track fills and one handle. bg/sub-200 and brand/dark are not dimmed versions of the off and on fills, they are the next step along each ramp, so pressing moves the control forward instead of fading it. The handle reads bg/white-0 and themes with everything else, so a dark mode handle is #0E0E0F, a near black knob on a blue track. Disabled adds nothing of its own and reuses bg/soft-100.
Guidelines
Name the setting, then say what it does. A toggle takes effect the moment it moves, so there is nothing to save and nothing to confirm.
Never label a toggle with a negative. Off then means on, and the reader has to solve a puzzle before changing a setting.
Toggle applies the moment it moves; if the change needs a Save step, use Checkbox. A toggle names a state, not an action, so Weekly digest is right and Turn on weekly digest is not. The 44 target is drawn into the component; the label component expects the whole row to be tappable, and that part you add in code.