Updated
Toggle and switch
A switch turns one setting on or off, and the change takes effect at once. Apple calls the control a toggle, Material 3 a switch.
Updated
On this page
In the kit
The components, drawn live from the kit’s tokens. Tap them: they behave as the Figma prototype does.
List, compact rows
Toggle with label
What does each system call it?
The same idea under its Apple, Material 3 and Appetite UI name.
| System | Name |
|---|---|
| Apple | Toggle |
| Material 3 | Switch |
| Appetite UI | Toggle |
What value does it take on iOS and Android?
Read from the kit’s Platform collection and its Material 3 pages, as the docs print them.
| Variable | iOS (ios-md) | Android |
|---|---|---|
platform/switch/track-width | 64 | 52 |
platform/switch/track-height | 28 | 32 |
| Component | iOS | Material 3 | What differs |
|---|---|---|---|
| Toggle | iOS / Toggle, 64 × 28 | M3 / Switch, 52 × 32 | Material has a 24 thumb inside the track, iOS has a 38 × 24 knob that becomes a glass lens when pressed |
In practice
If a change needs a Save button, it is not a switch: use a checkbox in a form instead. A switch label names the setting, never the action.
The two systems draw it differently: the iOS toggle is 64 by 28 with a knob that becomes a glass lens when pressed, the Material switch 52 by 32 with a thumb inside the track. Appetite UI reads both sizes from the Platform collection.