# 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.

Page: https://www.appetiteui.com/academy/glossary/toggle-switch. Toggle vs switch: iOS and Material 3 sizes. Also called Toggle vs switch.

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Toggle | Switch | Toggle |
| Switch track width | 64 pt | 52 dp | `platform/switch/track-width` |
| Switch track height | 28 pt | 32 dp | `platform/switch/track-height` |

| 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.

## Questions

### What is the difference between a toggle and a switch?

None in function: both turn one setting on or off at once. Apple names the control a toggle and Material 3 a switch, and each draws it at its own size.

### How big is a switch on iOS and Android?

In Appetite UI the track is 64 by 28 on iOS and 52 by 32 on Android, read from the Platform collection, so one component is right on both.

### Should I use a switch or a checkbox?

A switch when the change applies the moment it moves, such as notifications on or off. A checkbox when the choice is part of a form that someone submits, or when several options can be picked together.

## Sources

1. [Apple Human Interface Guidelines: Toggles](https://developer.apple.com/design/human-interface-guidelines/toggles)
2. [Material Design 3: Switch](https://m3.material.io/components/switch/overview)

## Related

- Screens: [Settings screens](https://www.appetiteui.com/screens/patterns/settings)
- Docs: [Toggle](https://www.appetiteui.com/docs/toggle)
- Docs: [Checkbox](https://www.appetiteui.com/docs/checkbox)
- Article: [Settings screen design for iOS and Android](https://www.appetiteui.com/blog/settings-screen-design-ios-android)
- Glossary: [List row](https://www.appetiteui.com/academy/glossary#list-row)
- Glossary: [Variable modes](https://www.appetiteui.com/academy/glossary/variable-modes)