Guides · · Maxwell Prehoda
11 Toggle Switch Design Examples, From the iOS Switch to Liquid Glass
A toggle switch is the right control for one thing: a setting with two states that takes effect the moment you flip it. Wi-Fi on, notifications off. If the change waits for a Save button, a checkbox is clearer. Everything about a good switch design follows from that: the knob moves the instant you tap, the on state is obvious without relying on color, and the label names the setting, not the state.
Below are the switches that define the pattern, with the rules their makers publish: Apple's iOS switch and its Liquid Glass successor, Material 3, Windows 11, the new native HTML switch, Radix for React, and the accessibility and UX guidance from W3C and Nielsen Norman Group. Each has a live pure-CSS version from our Toggle Switches directory where we have one, plus three of our own designs.
1. Apple's iOS switch: Best for settings lists in iPhone-style apps
Platform: iOS, iPadOS (UISwitch and SwiftUI Toggle)
The pill track with a white knob that glides across is the switch most people picture. Apple's Human Interface Guidelines add rules that most copies ignore: use the switch style only in a list row, where the row's text already says what it controls; outside a list, use a button that behaves like a toggle instead. Change the default green only if necessary, and if you use your accent color, make sure it contrasts with the off state.
Apple also warns against relying on color alone to show state, and iOS offers an On/Off Labels accessibility setting for that reason. The motion is part of the meaning: the knob travels toward the side that means on.
Our iOS Toggle Switch below is a pure-CSS recreation: the track fills with your accent as the knob glides, and holding it down stretches the knob toward the far side, as on iOS.
Watch out for: A switch in the middle of a form that is submitted later breaks Apple's model and NN/g's. If nothing happens until Save, use a checkbox.
2. Apple's Liquid Glass switch (iOS 26): Best for following Apple's newest control style
Platform: iOS 26, iPadOS 26, macOS Tahoe 26
In June 2025 Apple introduced Liquid Glass, a translucent material that reflects and refracts what is behind it, and applied it to buttons, switches, sliders, text and media controls across iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 and tvOS 26. Apple's announcement says controls dynamically morph as people interact with them.
On the switch, that shows up as a knob that turns into a clear lens while you hold it, so you see the track through it, before it springs to the other side. It is a good example of motion that explains touch: the control reacts to the press, not only to the result.
Our Liquid Glass Toggle Switch below is a pure-CSS take using backdrop-filter: a wide pill knob that lifts into a glass lens with a bright rim while held, then springs across.
Watch out for: Glass effects cost contrast and GPU time. On the web, backdrop-filter over a busy background can be hard to read and slow on older phones; test both.
3. Material 3 switch: Best for Android and Material-styled web apps
Platform: Material Web components (md-switch)
Material You's switch has an outlined track when off and a filled one when on, and it can carry icons inside the handle. In Google's Material Web components, the `icons` attribute shows icons for both states and `show-only-selected-icon` shows only the selected one, usually a check mark. An icon in the handle answers the color-only problem directly: on has a check, off doesn't.
The docs flag a practical catch: the component isn't automatically labeled by a surrounding label element, so every switch needs an aria-label.
Our Material 3 Switch below recreates the look in pure CSS: an outlined track whose small handle grows, turns white and gains a check when on, swells while pressed and shows a state layer on hover.
Watch out for: Material's handle changes size between states. If you rebuild it, animate the size with transform rather than width and height, or the switch will jitter on slower devices.
4. Windows 11 ToggleSwitch: Best for desktop settings with explicit On and Off text
Platform: WinUI 3 (Windows App SDK)
Microsoft's guidance describes the toggle switch as a physical power switch: use it for binary settings that take effect immediately, label it with one or two words (preferably nouns, like "Wi-Fi" or "Kitchen lights"), and use a checkbox when the user must press Submit or Next to apply changes or can pick several related options.
The Windows control shows literal On and Off text next to the switch by default, localized automatically, and you can replace them with OnContent and OffContent. Microsoft advises keeping the defaults: if On and Off don't describe the action, you probably need a different control.
Our Windows 11 Toggle Switch below recreates the Fluent look in CSS: an outlined track, a small knob that grows on hover and stretches while pressed, and On or Off text beside it.
Watch out for: State text next to a switch can be mistaken for its label. Keep the setting's name clearly separate (as a header above or text to the left), as Windows does.
5. HTML's native switch (Safari 17.4): Best for a real switch with zero custom JavaScript
Platform: HTML (input type=checkbox switch), Safari 17.4+
Safari 17.4 shipped a native switch: add the `switch` attribute to a checkbox, `<input type=checkbox switch>`, and you get a platform switch that behaves like a checkbox, exposes the ARIA switch role and announces On and Off. Browsers that don't support it simply show a normal checkbox, so it is safe to use today.
WebKit has also experimented with ::thumb and ::track pseudo-elements for styling, behind a feature flag, while the HTML standard work continues. Until those land everywhere, custom CSS on a checkbox remains the way to brand a switch.
Our Simple Toggle Switch below is that fallback in a few lines: a rounded track and a white knob drawn with ::after on a real checkbox, with a Tailwind version built on peer-checked.
Watch out for: Support outside Safari is limited, so the switch attribute is progressive enhancement, not a design system. Don't rely on it for a consistent look across browsers yet.
6. Radix UI Switch: Best for accessible switches in React design systems
Platform: React (Radix Primitives, also under shadcn/ui)
Radix's Switch is an unstyled primitive with two parts, Root and Thumb, that follows the WAI-ARIA switch pattern, uses the switch role, toggles with Space and Enter, and renders a hidden input so the value submits with a form. shadcn/ui's Switch is built on it.
For animation, the useful detail is that both parts expose `data-state="checked"` or `"unchecked"`. You write the motion in plain CSS against those attributes (translate the thumb, fill the track) and keep full control of the easing, which makes it easy to drop in any of the pure-CSS styles from our directory.
Watch out for: Because it is unstyled, the focus ring is your job. Style :focus-visible on the Root, or keyboard users won't see which switch they are on.
7. W3C ARIA switch pattern: Best for building a custom switch that works with assistive tech
Platform: WAI-ARIA Authoring Practices Guide
If you build a switch from a div or button, the W3C's Authoring Practices Guide is the spec to follow: `role="switch"`, `aria-checked` true or false, Space to toggle (Enter optional), and an accessible name from visible text, aria-labelledby or aria-label. The guide stresses one rule designers often break: the label on a switch does not change when its state changes.
It includes working examples built three ways (a div, buttons and native checkboxes), and notes that switches, checkboxes and toggle buttons are often interchangeable, so pick the one whose wording fits: on/off for switches, checked/unchecked for lists of choices.
Watch out for: Starting from a native checkbox (with role="switch" if you want the switch semantics) gets you focus, keyboard and form behavior for free. A div needs all of it rebuilt by hand.
8. Nielsen Norman Group toggle guidelines: Best for deciding between a toggle, checkbox or radio
Platform: UX research (NN/g, 2018)
Alita Kendrick's guidelines are the clearest statement of when a switch is right: toggle switches should take immediate effect, and if they can't, use radio buttons or a checkbox. Don't mix switches into long forms that need submitting, because people won't know whether the switch already did something.
On design, the advice is to make it look like a slider and move when the state changes, use a high-contrast on color with cultural associations in mind, and if you show state text, put Off on the left and On on the right. Test a label by reading it aloud with "on" or "off" after it.
Our On Off Toggle Switch below follows that advice: ON and OFF sit inside the track opposite the knob and slide out of its way, so the state reads without color.
Watch out for: Red for "off" and green for "on" fails for many colorblind users and reads as stop or go in some contexts. Pair color with position and text or an icon.
9. Our Day Night Toggle: Best for playful theme switches on personal sites
Platform: Motions directory, free, pure CSS Ours
The famous day and night switch: a sun with halo rings rolls across a blue sky, a moon slides over it, clouds sink away and twinkling stars drop in. It is built from spans and box-shadows, with no images.
It is a showpiece, so use it where personality matters more than density: a portfolio, a blog, a landing page's theme toggle. For product settings, a plain switch reads faster. Our dark mode toggle guide covers calmer theme switches too.
Watch out for: Make sure it still works as a real control: a checkbox underneath, a visible focus ring, and a label like "Dark mode" for screen readers, since the scene itself says nothing to them.
10. Our Toggle with Saving Status: Best for settings that save to a server
Platform: Motions directory, free, pure CSS Ours
Switches promise an immediate effect, but many settings need a server round trip. This row solves that honestly: the knob stops halfway with a spinner while the status reads Saving, then lands with a little overshoot, the track fills and the status turns On.
It keeps the switch's promise (something happened right away) while being truthful about the wait. If the save fails, return the knob to off and say why.
Watch out for: Only show the intermediate state if the save takes more than a few hundred milliseconds; for fast saves, flip immediately and roll back on error.
11. Our Check and Cross Toggle Switch: Best for switches that must read without color
Platform: Motions directory, free, pure CSS and SVG Ours
A knob that says what it means: a gray cross spins away when you switch it on, and a check mark draws itself in your accent with stroke-dashoffset. It is the simplest fix for Apple's and NN/g's warning about color-only state.
Use it for consent and privacy settings, where being unambiguous matters more than minimalism, or anywhere your on color is subtle.
Watch out for: Icons inside a small knob need enough size to read. Keep the knob at least 20px and the icons at full contrast against it.
How to choose a toggle switch design
Check that a switch is the right control
Use a switch only for a two-state setting that applies immediately, as NN/g, Apple and Microsoft all say. If the change waits for Save, use a checkbox; if there are more than two options, use radios or a segmented control. On iOS, use the switch style in list rows and a toggle button elsewhere.
Match it to your platform
Follow the platform's look where users expect it: iOS or Liquid Glass for iPhone-style apps, Material 3 for Android, Fluent for Windows. On the web, start from a native checkbox (with the switch attribute as a bonus in Safari) or Radix in React, then style it. Our Toggle Switches directory has each platform style in pure CSS.
Make the state obvious and the motion quick
Move the knob, fill the track, and add an icon or text so color isn't the only cue. Keep the slide around 150 to 250ms; a gentle spring overshoot like our Spring Toggle Switch adds feel without delay. Never change the label when the state changes, and keep a visible focus ring.
Pick your switch in five minutes
Decide which platform your users expect, grab the matching switch from the directory, and set your accent color and size with its two custom properties. Then check three things: it flips instantly, it reads without color, and it works with the keyboard.
If you want a switch nobody else has, describe it to the creator ("a switch whose knob is a little rocket that launches when turned on") and get production-ready CSS with a reduced-motion version built in.
Make a toggle switch from a native checkbox with role="switch", CSS only. Track 44 by 24px, knob 20px. On check, the knob slides right in 200ms with a slight spring overshoot and the track fills with my accent color. A small check icon fades into the knob when on, so the state reads without color. While pressed, the knob stretches 4px toward the direction it will travel. Visible :focus-visible ring. With prefers-reduced-motion, change state instantly with no slide.
Common questions
When should I use a toggle switch instead of a checkbox?
Use a switch when the setting takes effect immediately, like turning on notifications. Use a checkbox when the choice is applied later with a Save or Submit button, or when selecting several items from a list. NN/g, Apple and Microsoft all give this same rule.
How do I make a toggle switch with only CSS?
Style a real checkbox: hide its default look with appearance: none (or visually hide it and style a sibling), draw the track as the element and the knob with ::after, then on :checked translate the knob and change the track color with a short transition. Our Simple Toggle Switch is a minimal example.
Is there a native HTML toggle switch?
Safari 17.4 added one: input type="checkbox" with the switch attribute. Other browsers show a regular checkbox, so it works as progressive enhancement. For a consistent design across browsers, style a checkbox yourself.
How do I make a toggle switch accessible?
Use a native checkbox or role="switch" with aria-checked, give it a label that names the setting and never changes, support Space to toggle, show a visible focus ring, and indicate state with position plus text or an icon, not color alone.
What color should a toggle switch be when on?
A high-contrast color that stands out from the off state. Apple's default is green and its guidelines allow your accent color if it contrasts enough. Avoid relying on red and green alone, since many people can't tell them apart.