--- title: Toggle description: Toggle turns one setting on or off and applies it at once. Appetite UI Figma component: four states with a focus ring, label rules and tokens. group: Components source: https://www.appetiteui.com/docs/toggle dateModified: 2026-10-08 --- # Toggle Updated: October 8, 2026. Toggle turns a single setting on or off, and applies the change immediately. ## Preview Default, active. A 44 by 28 track with a 22 pt handle, centered in a 52 by 44 frame, so the thing you can hit is bigger than the thing you can see. Click it. Specimen: State Default, Active True. Frame 52 x 44, track 44 x 28, radius 9999, 22 px handle, 16 px of travel. The 52 by 44 frame is the target and the control inside it is 44 by 28, sitting 4 from each side and 8 from the top and bottom. The handle is a 22 circle inset 3, so it sits 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. Source: the Toggle set of the Appetite UI Figma file, read on October 2, 2026. ## Which states does Toggle have? Four: Default, Pressed, Focused and Disabled, each off or on. The file has no Hover state, because a finger does not hover, so a pointer hover moves these specimens toward Pressed. Pressed shifts the track while the finger is down, and Focused draws the ring for keyboard and switch control. Specimen: State x Active. Default, Pressed, Focused, Disabled, each off then on. Focused is the focusRing/brand effect style, a 2 pt gap in the surface color and then a 2 pt ring in brand/base, drawn around the track. The frame is 52 by 44 so the ring has room. Pressed moves each fill one step along its own ramp: bg/sub-200 when off, brand/pressed when on. Disabled off is bg/soft-100 with no handle shadow. Disabled on keeps brand/base at 40 percent opacity, so a disabled switch still shows which way it is set. Eight variants, State by Active, no holes. Source: component set 216:449 of the Appetite UI Figma file, read on October 2, 2026. ## 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. Each row is one switch: click the text or the track. Specimen: Align Left, Align Right. 340 x 48, gap 16, title 18/28, description 14/20. The row is 340 by 48: the 52 wide Toggle, 16 of gap, then 272 of text. The height comes from the text, 28 for the title plus 20 for the description at 14/20, so switching Show Description off takes the row to 44, the height of the Toggle frame. Align swaps the order of the two children. ## Properties Two component sets: Toggle, the track, and _Toggle Label, the row that carries it. | Property | Type | Default | | --- | --- | --- | | `State` | Default \| Pressed \| Disabled \| Focused | Default | | `Active` | True \| False | False | | `Align` | Left \| Right | Left | | `Show Description` | Boolean | true | | `Label` | Text | Label | | `Description` | Text | Get a push when the order ships | Toggle is eight 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 _Toggle Label out of the published library, so copy the row from the Toggle page of the file when you need it. ## Tokens Every value the toggle reads, resolved through its aliases to the primitive underneath. | Token | Light | Dark | Applied to | | --- | --- | --- | --- | | `bg/soft-100` | #E9E9EA | #48484A | Track when off, Disabled and off | | `bg/sub-200` | #D1D1D6 | #636366 | Track pressed while off | | `brand/base` | #155DFC | #2B7FFF | Track when on, at 40% when Disabled | | `brand/pressed` | #193CB8 | #155DFC | Track pressed while on | | `static/static-white-0` | #FFFFFF | #FFFFFF | Handle | | `focusRing/brand` | 2 pt `bg/white-0`, then 2 pt `brand/base` | 2 pt `bg/white-0`, then 2 pt `brand/base` | Focused, on the track | | `text/strong-950` | #0E0E0F | #FFFFFF | Label title | | `text/sub-700` | #48484A | #C7C7CC | Label description | bg/sub-200 is the next step along the gray ramp and brand/pressed is a step darker than brand/base in both modes, so pressing moves the control forward. The handle reads static/static-white-0, so it stays white in dark mode. ## How does Toggle differ on iOS and Material 3? Appetite UI Toggle keeps one shape on both platforms: a 44 by 28 track in a 52 by 44 frame. The native switches live on the iOS and Material 3 pages of the file. | Appetite UI | iOS counterpart | Material 3 counterpart | What differs | | --- | --- | --- | --- | | Toggle | iOS / Toggle, 64 by 28, State Idle and Pressed by Is On by Is Enabled | M3 / Switch, 52 by 32, Selected by Is Enabled | The iOS track is 20 wider than Appetite UI and the Material 3 track is 8 wider and 4 taller. Neither native set has a Focused state. | The minimum touch target is 44 pt on iOS and 48 dp on Material 3, set by `platform/min-touch-target` in the Platform collection. The 52 by 44 frame meets the iOS minimum on both axes. On Android, add 4 dp of hit area in code. ## Guidelines - Do: 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. - Avoid: Never label a toggle with a negative. Off then means on, and the reader has to solve a puzzle before changing a setting. If a change needs a Save step, use Checkbox instead. A toggle names a state, so Weekly digest is right and Turn on weekly digest is not. Make the whole label row tappable in code, because the file draws only the 52 by 44 frame as the target. [Settings screen design for iOS and Android](https://www.appetiteui.com/blog/settings-screen-design-ios-android) and [Touch target size on iOS and Android: 44 pt, 48 dp and the WCAG minimum](https://www.appetiteui.com/blog/touch-target-size-ios-android). ## In the screens and the glossary - Glossary: [Toggle and switch](https://www.appetiteui.com/academy/glossary/toggle-switch) - Screens: [Settings screens](https://www.appetiteui.com/screens/patterns/settings)