--- title: "Toggle switch UI: anatomy, variants and examples | Kombai" description: "A toggle switch turns one setting on or off, and the change takes effect right away." canonical_url: https://kombai.com/glossary/toggle-switch/ author: "The Kombai Team" --- # Toggle switch A toggle switch turns one setting on or off, and the change takes effect right away. - Also called: switch, toggle, on/off switch - Platforms: Web, Mobile - In the Kombai gallery: [59 web designs](https://kombai.com/gallery/web/toggle-switch/), [35 mobile designs](https://kombai.com/gallery/mobile/toggle-switch/) - [Pinemarch](https://kombai.com/gallery/inspirations/toggle-switch-ios-10/) (Mobile) - [Driftwell](https://kombai.com/gallery/inspirations/toggle-switch-ios-15/) (Mobile) - [Basalt](https://kombai.com/gallery/inspirations/toggle-switch-web-3/) (Web) ## What is a toggle switch? A toggle switch is a two-state control for a single option. Sliding the thumb across the track flips the option between on and off, and the new state applies immediately, with no Save button. - On fills the track with an accent color. Off shows a neutral track. - Each switch controls exactly one thing, named by the label beside it. ## When to use toggle switch - **Instant changes.** The setting applies the moment it flips, like muting alerts. - **One binary option.** The option has a clear on and off, like dark mode. - **An obvious label.** People can tell from the label exactly what turns on. ## When not to use one - **Changes that wait for Save.** Inside a form with a submit button, use a checkbox. - **More than two choices.** Use radio buttons, a segmented control or a dropdown. - **Unclear effects.** If people can't predict what happens, use a button that names the action. ## Anatomy 1. **Track**: Carries the state color 2. **Thumb**: Slides to show on or off 3. **Label**: Names what turns on 4. **Description**: Optional, one line 5. **States**: Off, on, disabled, focus ## Variants We sorted every toggle switch design in the Kombai gallery and found five patterns. ### 1. Switch rows with descriptions The default. A label, a one-line explanation and the switch at the end of the row. - [Pellucid](https://kombai.com/gallery/inspirations/toggle-switch-ios-12/) (Mobile) - [Cobblestone](https://kombai.com/gallery/inspirations/toggle-switch-web-28/) (Web) - [Thistle](https://kombai.com/gallery/inspirations/toggle-switch-web-6/) (Web) ### 2. Switch cards Each switch sits in its own card with an icon and a longer explanation, for options that each need context. - [Kilnwood](https://kombai.com/gallery/inspirations/toggle-switch-ios-4/) (Mobile) - [Larkspur](https://kombai.com/gallery/inspirations/toggle-switch-ios-8/) (Mobile) - [Currant](https://kombai.com/gallery/inspirations/toggle-switch-web-32/) (Web) ### 3. Labeled switches ON and OFF text, or a check inside the thumb, so the state doesn't depend on color alone. - [Tidewell](https://kombai.com/gallery/inspirations/toggle-switch-web-20/) (Web) - [Driftwell Suite](https://kombai.com/gallery/inspirations/toggle-switch-web-52/) (Web) - [Penmark](https://kombai.com/gallery/inspirations/toggle-switch-web-44/) (Web) ### 4. Master switch One switch at the top turns a whole group on or off, with the individual switches below it. - [Tessellate](https://kombai.com/gallery/inspirations/toggle-switch-ios-16/) (Mobile) - [Orrery](https://kombai.com/gallery/inspirations/toggle-switch-ios-34/) (Mobile) - [Vesper](https://kombai.com/gallery/inspirations/toggle-switch-web-18/) (Web) ### 5. Expressive switches Oversized, animated switches used as a product moment, like a theme flip on a landing page. - [Colour Field](https://kombai.com/gallery/inspirations/toggle-switch-web-56/) (Web) - [Theme Switch](https://kombai.com/gallery/inspirations/toggle-switch-web-58/) (Web) - [Aqua](https://kombai.com/gallery/inspirations/toggle-switch-web-59/) (Web) ## Where toggle switches show up ### Filters and search Switches turn individual filters on in a sheet or modal, next to sort options. - [Palladin](https://kombai.com/gallery/inspirations/toggle-switch-ios-3/) (Mobile) - [Umbra Works](https://kombai.com/gallery/inspirations/toggle-switch-ios-17/) (Mobile) - [Perch](https://kombai.com/gallery/inspirations/toggle-switch-web-13/) (Web) ### Sharing and privacy A single switch decides who can see a board, a project or a link. - [Everly](https://kombai.com/gallery/inspirations/toggle-switch-ios-19/) (Mobile) - [Wexford](https://kombai.com/gallery/inspirations/toggle-switch-web-39/) (Web) - [Marlowe](https://kombai.com/gallery/inspirations/toggle-switch-web-22/) (Web) ### Consent and permissions Per-category consent, AI training opt-ins and tool permissions. - [Zephyrine](https://kombai.com/gallery/inspirations/toggle-switch-ios-21/) (Mobile) - [Solstice](https://kombai.com/gallery/inspirations/toggle-switch-web-27/) (Web) - [Corvid](https://kombai.com/gallery/inspirations/toggle-switch-web-46/) (Web) ### Table and view options Show or hide columns, and set permissions per role across a matrix. - [Crosshatch](https://kombai.com/gallery/inspirations/toggle-switch-web-36/) (Web) - [Lanterna](https://kombai.com/gallery/inspirations/toggle-switch-web-42/) (Web) - [Cadenza](https://kombai.com/gallery/inspirations/toggle-switch-web-26/) (Web) ## Toggle switch vs similar components | | [Toggle switch](https://kombai.com/glossary/toggle-switch/) | [Checkbox](https://kombai.com/glossary/checkbox/) | [Radio button](https://kombai.com/glossary/radio-button/) | [Segmented control](https://kombai.com/glossary/segmented-control/) | |---|---|---|---|---| | Applies | Right away | Usually on submit | Usually on submit | Right away | | Choices | One option, on or off | Any number from a list | Exactly one from a list | One of 2 to 5 views or values | | Best for | Settings that apply instantly | Forms and multi-select lists | Exclusive choices in a form | Switching views or modes | ## Build notes - Use role="switch" with aria-checked, or a native checkbox styled as a switch. - Make the whole row the click target, label included. - Space toggles it, and keyboard focus needs a visible ring. - Pair color with a second cue: thumb position, a check or ON and OFF text. - Keep touch targets at 44 by 44 points or more on mobile. - Save on flip and show a failure inline. Don't add a Save button. ## FAQ ### What's the difference between a toggle switch and a checkbox? A toggle switch applies its change the moment it flips. A checkbox records a choice that usually takes effect when the form is submitted, and it works for picking several options from a list. ### Should a toggle switch save immediately? Yes. People expect a switch to act right away, like a light switch. If the change needs a confirm step or a Save button, use a checkbox instead, and if saving fails, flip the switch back and say why next to it. ### Should the label go on the left or the right? Put the label on the left and the switch at the end of the row in settings lists, so labels line up and switches form one column. Standalone switches can sit to the left of a short label. ### Is a toggle switch the same as a toggle button? No. A toggle switch has a track and a thumb and stands for on or off. A toggle button is a regular button that stays pressed, like Bold in a text editor, and often sits in a group. ## Related terms - [Checkbox](https://kombai.com/glossary/checkbox/) - [Radio button](https://kombai.com/glossary/radio-button/) - [Segmented control](https://kombai.com/glossary/segmented-control/) - [Slider](https://kombai.com/glossary/slider/) ## References - [Apple Human Interface Guidelines: Toggles](https://developer.apple.com/design/human-interface-guidelines/toggles) - [Material Design 3: Switch](https://m3.material.io/components/switch/overview) - [WAI-ARIA Authoring Practices: Switch pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)