47 Tailwind CSS Toggles & Switches
36 / 47

All 47 in 47 Tailwind CSS Toggles & Switches

  1. 01Tailwind iOS-Style Toggle Switch with appearance-none
  2. 02Tailwind Dark Mode Sun / Moon Theme Switcher
  3. 03Tailwind Neumorphic Soft-UI Pill Toggle
  4. 04Tailwind Gooey Liquid Morphing Switch with SVG Filter
  5. 05Tailwind Bouncy Elastic Physics Toggle (Overshoot Cubic-Bezier)
  6. 06Tailwind ON / OFF Text Switch with Labels Inside the Track
  7. 07Tailwind SaaS Pricing Toggle — Monthly / Annually Segmented Pill
  8. 08Tailwind Mechanical Keycap Toggles with Haptic Feedback
  9. 09Tailwind Waveform Mute Toggle with Animated EQ Bars
  10. 10Tailwind Timed Auto-Off Toggle with Conic Countdown Ring
  11. 11Tailwind Press-and-Hold to Confirm Toggle (Fingerprint Scan)
  12. 12Tailwind Split-Flap Departure Board Toggle (3D Flip)
  13. 13Tailwind Permission Toggle Group with :has() Live Status Badge
  14. 14Tailwind Material Design 3 Switch with State Layer
  15. 15Tailwind Skeuomorphic Wall Light Switch with Room Relight
  16. 16Tailwind Neon Cyberpunk Toggle with Clipped Corners
  17. 17Tailwind Brutalist Snap Toggle with Hard Offset Shadow
  18. 18Tailwind Day / Night Landscape Scene Switch
  19. 19Tailwind 3D Flip Card Toggle (rotateY Switch)
  20. 20Tailwind Sliding Pill Toggle with Label Inside the Thumb
  21. 21Tailwind Glassmorphism Frosted Toggle with backdrop-blur
  22. 22Tailwind Rotary Knob Toggle with Brushed-Metal Conic Gradient
  23. 23Tailwind iOS Settings List with Grouped Toggle Rows
  24. 24Tailwind Minimal Outline Toggle Drawn in currentColor
  25. 25Tailwind Squash-and-Stretch Pebble Toggle
  26. 26Tailwind Industrial Rocker I/O Power Switch
  27. 27Tailwind Accessible role=switch Toggle with forced-colors Support
  28. 28Tailwind Macro-Pad Toggle Grid with RGB Underglow
  29. 29Tailwind Radial VU Meter Mute Toggle
  30. 30Tailwind Segmented Pip Countdown Auto-Off Toggle
  31. 31Tailwind Slide-to-Confirm Toggle Rail (Drag or Arrow Keys)
  32. 32Tailwind Odometer Roll ON / OFF Toggle
  33. 33Tailwind Master Toggle with Indeterminate Tri-State
  34. 34Tailwind iOS Control Centre Tile Toggles
  35. 35Tailwind Material 3 Connected Icon Toggle Buttons
  36. 36Tailwind Two-Gang Wall Plate with Cumulative Room Light
  37. 37Tailwind Neon Toggle with Animated Conic Border Light
  38. 38Tailwind Brutalist Rubber-Stamp Toggle
  39. 39Tailwind Aurora Night Sky Toggle Switch
  40. 40Tailwind 3D Rotating Cube Toggle
  41. 41Tailwind Three-Position Off / Auto / On Selector
  42. 42Tailwind Liquid Glass Toggle with Specular Highlight
  43. 43Tailwind Three-Detent Rotary Selector Knob
  44. 44Tailwind Hardware Slide Switch with Knurled Grip
  45. 45Tailwind Battery Saver Toggle with Live Fill Meter
  46. 46Tailwind Morphing Sun-to-Moon Icon Toggle (SVG Stroke)
  47. 47Tailwind Guarded Kill Switch Under a Flip-Up Safety Cover
Pure TailwindMIT licensed

Tailwind Two-Gang Wall Plate with Cumulative Room Light

Two switches on one plate, and the room responds to BOTH: one on is a dim pool of light, two on floods the scene. Counting children in pure CSS is the trick — :has() can test combinations even though it cannot count.

Live Demo
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="ttg-36 relative overflow-hidden w-full min-h-svh flex flex-col items-center justify-center gap-8 px-5 py-14 bg-ttg36-dark font-ttg36-sans transition-colors duration-700 has-[#ttg-36-a:checked]:bg-ttg36-dim has-[#ttg-36-b:checked]:bg-ttg36-dim has-[#ttg-36-a:checked]:has-[#ttg-36-b:checked]:bg-ttg36-bright has-[#ttg-36-a:checked]:[&_.ttg36-pool]:opacity-100 has-[#ttg-36-b:checked]:[&_.ttg36-pool]:opacity-100 has-[#ttg-36-a:checked]:has-[#ttg-36-b:checked]:[&_.ttg36-wash]:opacity-100 motion-reduce:transition-none" aria-label="Two gang wall plate">
  <span aria-hidden="true" class="ttg36-pool pointer-events-none absolute top-[10%] left-1/2 -translate-x-1/2 w-80 h-80 rounded-full opacity-0 transition-opacity duration-700 bg-radial from-ttg36-glow to-transparent to-70% motion-reduce:transition-none"></span>
  <span aria-hidden="true" class="ttg36-wash pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-700 bg-radial from-ttg36-wash to-transparent to-75% motion-reduce:transition-none"></span>
  <div class="relative z-10 flex gap-5 px-7 py-8 rounded-2xl bg-linear-170 from-ttg36-platehi to-ttg36-platelo shadow-[inset_0_2px_0_oklch(1_0_0/0.85),inset_0_-3px_5px_oklch(0.4_0.03_80/0.3),0_20px_38px_-16px_oklch(0_0_0/0.6)]">
    <span class="flex flex-col items-center gap-3">
      <span class="relative block w-14 h-24 p-1 rounded-lg bg-ttg36-well shadow-[inset_0_3px_7px_oklch(0.4_0.03_80/0.5)] perspective-[320px]">
        <input type="checkbox" id="ttg-36-a" role="switch" aria-label="Ceiling light" class="peer sr-only">
        <label for="ttg-36-a" aria-hidden="true" class="block w-full h-full rounded-md cursor-pointer bg-linear-to-b from-ttg36-paddlelo via-ttg36-paddlehi via-55% to-ttg36-paddlemid shadow-[0_4px_8px_oklch(0.4_0.03_80/0.35),inset_0_1px_0_oklch(1_0_0/0.8)] origin-center rotate-x-[15deg] transition-transform duration-200 ease-[cubic-bezier(0.5,1.4,0.6,1)] peer-checked:-rotate-x-[15deg] peer-checked:bg-linear-to-t peer-focus-visible:outline-3 peer-focus-visible:outline-ttg36-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-none"></label>
      </span>
      <span class="text-[10px] font-bold tracking-[0.2em] text-ttg36-tag">CEILING</span>
    </span>
    <span class="flex flex-col items-center gap-3">
      <span class="relative block w-14 h-24 p-1 rounded-lg bg-ttg36-well shadow-[inset_0_3px_7px_oklch(0.4_0.03_80/0.5)] perspective-[320px]">
        <input type="checkbox" id="ttg-36-b" role="switch" aria-label="Lamps" class="peer sr-only">
        <label for="ttg-36-b" aria-hidden="true" class="block w-full h-full rounded-md cursor-pointer bg-linear-to-b from-ttg36-paddlelo via-ttg36-paddlehi via-55% to-ttg36-paddlemid shadow-[0_4px_8px_oklch(0.4_0.03_80/0.35),inset_0_1px_0_oklch(1_0_0/0.8)] origin-center rotate-x-[15deg] transition-transform duration-200 ease-[cubic-bezier(0.5,1.4,0.6,1)] peer-checked:-rotate-x-[15deg] peer-checked:bg-linear-to-t peer-focus-visible:outline-3 peer-focus-visible:outline-ttg36-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-none"></label>
      </span>
      <span class="text-[10px] font-bold tracking-[0.2em] text-ttg36-tag">LAMPS</span>
    </span>
  </div>
  <p class="relative z-10 text-[12px] tracking-[0.12em] uppercase text-ttg36-caption transition-colors duration-700 [.ttg-36:has(:checked)_&]:text-ttg36-captionlit motion-reduce:transition-none">One on dims the room &middot; two floods it</p>
</section>
@import "tailwindcss";

@theme {
  --color-ttg36-dark: #1f232c;
  --color-ttg36-dark: oklch(0.25 0.015 265);
  --color-ttg36-dim: #4a4436;
  --color-ttg36-dim: oklch(0.44 0.03 85);
  --color-ttg36-bright: #efe1c2;
  --color-ttg36-bright: oklch(0.92 0.05 88);
  --color-ttg36-glow: #ffd07a;
  --color-ttg36-glow: oklch(0.87 0.13 80 / 0.45);
  --color-ttg36-wash: #ffe6b5;
  --color-ttg36-wash: oklch(0.92 0.08 85 / 0.4);
  --color-ttg36-platehi: #f5f2eb;
  --color-ttg36-platehi: oklch(0.96 0.008 85);
  --color-ttg36-platelo: #d9d4c8;
  --color-ttg36-platelo: oklch(0.87 0.012 85);
  --color-ttg36-well: #c7c1b3;
  --color-ttg36-well: oklch(0.81 0.014 85);
  --color-ttg36-paddlehi: #f8f5ee;
  --color-ttg36-paddlehi: oklch(0.97 0.006 85);
  --color-ttg36-paddlemid: #efece3;
  --color-ttg36-paddlemid: oklch(0.94 0.008 85);
  --color-ttg36-paddlelo: #cdc7b9;
  --color-ttg36-paddlelo: oklch(0.83 0.013 85);
  --color-ttg36-tag: #6e6858;
  --color-ttg36-tag: oklch(0.5 0.015 85);
  --color-ttg36-caption: #9ba1ae;
  --color-ttg36-caption: oklch(0.7 0.014 265);
  --color-ttg36-captionlit: #6b5f43;
  --color-ttg36-captionlit: oklch(0.48 0.045 85);
  --color-ttg36-focus: #5b8def;
  --color-ttg36-focus: oklch(0.65 0.16 258);
  --font-ttg36-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-36 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-ttg36-dark: #1f232c;
  --color-ttg36-dark: oklch(0.25 0.015 265);
  --color-ttg36-dim: #4a4436;
  --color-ttg36-dim: oklch(0.44 0.03 85);
  --color-ttg36-bright: #efe1c2;
  --color-ttg36-bright: oklch(0.92 0.05 88);
  --color-ttg36-glow: #ffd07a;
  --color-ttg36-glow: oklch(0.87 0.13 80 / 0.45);
  --color-ttg36-wash: #ffe6b5;
  --color-ttg36-wash: oklch(0.92 0.08 85 / 0.4);
  --color-ttg36-platehi: #f5f2eb;
  --color-ttg36-platehi: oklch(0.96 0.008 85);
  --color-ttg36-platelo: #d9d4c8;
  --color-ttg36-platelo: oklch(0.87 0.012 85);
  --color-ttg36-well: #c7c1b3;
  --color-ttg36-well: oklch(0.81 0.014 85);
  --color-ttg36-paddlehi: #f8f5ee;
  --color-ttg36-paddlehi: oklch(0.97 0.006 85);
  --color-ttg36-paddlemid: #efece3;
  --color-ttg36-paddlemid: oklch(0.94 0.008 85);
  --color-ttg36-paddlelo: #cdc7b9;
  --color-ttg36-paddlelo: oklch(0.83 0.013 85);
  --color-ttg36-tag: #6e6858;
  --color-ttg36-tag: oklch(0.5 0.015 85);
  --color-ttg36-caption: #9ba1ae;
  --color-ttg36-caption: oklch(0.7 0.014 265);
  --color-ttg36-captionlit: #6b5f43;
  --color-ttg36-captionlit: oklch(0.48 0.045 85);
  --color-ttg36-focus: #5b8def;
  --color-ttg36-focus: oklch(0.65 0.16 258);
  --font-ttg36-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-36 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • Stacked relational variants are a boolean AND: has-[#ttg-36-a:checked]:has-[#ttg-36-b:checked]:bg-ttg36-bright fires only when both gangs are on. There is no OR variant, so "either" is written as two separate rules — which is worth knowing before you try to express a third state.
  • The additive glow (a pool for either, a wash for both) is what makes this read as lighting rather than as theming; swapping one background for another would have been one rule and half the effect.
  • Ids inside the relational selector are deliberate for a fixed plate. In a component, swap them for has-[[data-gang=a]:checked] so the markup can be duplicated.
  • UI upgrade over demo 15: two gangs with a cumulative response instead of one binary room, printed gang tags so each switch says what it controls, and the dark state lifted to oklch(0.25) with oklch(0.7) caption ink — 6.4:1 in the unlit room, where the original sat at 3.4:1.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Two-Gang Wall Plate with Cumulative Room Light
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-two-gang-wall-plate-cumulative-room-light/

Two switches on one plate, and the room responds to BOTH: one on is a dim pool of light, two on floods the scene. Counting children in pure CSS is the trick &mdash; :has() can test combinations even though it cannot count.
## HTML
```html
<section class="ttg-36 relative overflow-hidden w-full min-h-svh flex flex-col items-center justify-center gap-8 px-5 py-14 bg-ttg36-dark font-ttg36-sans transition-colors duration-700 has-[#ttg-36-a:checked]:bg-ttg36-dim has-[#ttg-36-b:checked]:bg-ttg36-dim has-[#ttg-36-a:checked]:has-[#ttg-36-b:checked]:bg-ttg36-bright has-[#ttg-36-a:checked]:[&_.ttg36-pool]:opacity-100 has-[#ttg-36-b:checked]:[&_.ttg36-pool]:opacity-100 has-[#ttg-36-a:checked]:has-[#ttg-36-b:checked]:[&_.ttg36-wash]:opacity-100 motion-reduce:transition-none" aria-label="Two gang wall plate">
  <span aria-hidden="true" class="ttg36-pool pointer-events-none absolute top-[10%] left-1/2 -translate-x-1/2 w-80 h-80 rounded-full opacity-0 transition-opacity duration-700 bg-radial from-ttg36-glow to-transparent to-70% motion-reduce:transition-none"></span>
  <span aria-hidden="true" class="ttg36-wash pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-700 bg-radial from-ttg36-wash to-transparent to-75% motion-reduce:transition-none"></span>
  <div class="relative z-10 flex gap-5 px-7 py-8 rounded-2xl bg-linear-170 from-ttg36-platehi to-ttg36-platelo shadow-[inset_0_2px_0_oklch(1_0_0/0.85),inset_0_-3px_5px_oklch(0.4_0.03_80/0.3),0_20px_38px_-16px_oklch(0_0_0/0.6)]">
    <span class="flex flex-col items-center gap-3">
      <span class="relative block w-14 h-24 p-1 rounded-lg bg-ttg36-well shadow-[inset_0_3px_7px_oklch(0.4_0.03_80/0.5)] perspective-[320px]">
        <input type="checkbox" id="ttg-36-a" role="switch" aria-label="Ceiling light" class="peer sr-only">
        <label for="ttg-36-a" aria-hidden="true" class="block w-full h-full rounded-md cursor-pointer bg-linear-to-b from-ttg36-paddlelo via-ttg36-paddlehi via-55% to-ttg36-paddlemid shadow-[0_4px_8px_oklch(0.4_0.03_80/0.35),inset_0_1px_0_oklch(1_0_0/0.8)] origin-center rotate-x-[15deg] transition-transform duration-200 ease-[cubic-bezier(0.5,1.4,0.6,1)] peer-checked:-rotate-x-[15deg] peer-checked:bg-linear-to-t peer-focus-visible:outline-3 peer-focus-visible:outline-ttg36-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-none"></label>
      </span>
      <span class="text-[10px] font-bold tracking-[0.2em] text-ttg36-tag">CEILING</span>
    </span>
    <span class="flex flex-col items-center gap-3">
      <span class="relative block w-14 h-24 p-1 rounded-lg bg-ttg36-well shadow-[inset_0_3px_7px_oklch(0.4_0.03_80/0.5)] perspective-[320px]">
        <input type="checkbox" id="ttg-36-b" role="switch" aria-label="Lamps" class="peer sr-only">
        <label for="ttg-36-b" aria-hidden="true" class="block w-full h-full rounded-md cursor-pointer bg-linear-to-b from-ttg36-paddlelo via-ttg36-paddlehi via-55% to-ttg36-paddlemid shadow-[0_4px_8px_oklch(0.4_0.03_80/0.35),inset_0_1px_0_oklch(1_0_0/0.8)] origin-center rotate-x-[15deg] transition-transform duration-200 ease-[cubic-bezier(0.5,1.4,0.6,1)] peer-checked:-rotate-x-[15deg] peer-checked:bg-linear-to-t peer-focus-visible:outline-3 peer-focus-visible:outline-ttg36-focus peer-focus-visible:outline-offset-4 motion-reduce:transition-none"></label>
      </span>
      <span class="text-[10px] font-bold tracking-[0.2em] text-ttg36-tag">LAMPS</span>
    </span>
  </div>
  <p class="relative z-10 text-[12px] tracking-[0.12em] uppercase text-ttg36-caption transition-colors duration-700 [.ttg-36:has(:checked)_&]:text-ttg36-captionlit motion-reduce:transition-none">One on dims the room &middot; two floods it</p>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg36-dark: #1f232c;
  --color-ttg36-dark: oklch(0.25 0.015 265);
  --color-ttg36-dim: #4a4436;
  --color-ttg36-dim: oklch(0.44 0.03 85);
  --color-ttg36-bright: #efe1c2;
  --color-ttg36-bright: oklch(0.92 0.05 88);
  --color-ttg36-glow: #ffd07a;
  --color-ttg36-glow: oklch(0.87 0.13 80 / 0.45);
  --color-ttg36-wash: #ffe6b5;
  --color-ttg36-wash: oklch(0.92 0.08 85 / 0.4);
  --color-ttg36-platehi: #f5f2eb;
  --color-ttg36-platehi: oklch(0.96 0.008 85);
  --color-ttg36-platelo: #d9d4c8;
  --color-ttg36-platelo: oklch(0.87 0.012 85);
  --color-ttg36-well: #c7c1b3;
  --color-ttg36-well: oklch(0.81 0.014 85);
  --color-ttg36-paddlehi: #f8f5ee;
  --color-ttg36-paddlehi: oklch(0.97 0.006 85);
  --color-ttg36-paddlemid: #efece3;
  --color-ttg36-paddlemid: oklch(0.94 0.008 85);
  --color-ttg36-paddlelo: #cdc7b9;
  --color-ttg36-paddlelo: oklch(0.83 0.013 85);
  --color-ttg36-tag: #6e6858;
  --color-ttg36-tag: oklch(0.5 0.015 85);
  --color-ttg36-caption: #9ba1ae;
  --color-ttg36-caption: oklch(0.7 0.014 265);
  --color-ttg36-captionlit: #6b5f43;
  --color-ttg36-captionlit: oklch(0.48 0.045 85);
  --color-ttg36-focus: #5b8def;
  --color-ttg36-focus: oklch(0.65 0.16 258);
  --font-ttg36-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-36 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

CSS cannot count, but it can combine. Stacking two has-[...] variants on one element is a logical AND, so three lighting states fall out of two switches: none, either (dim), both (bright). For two or three children this is cleaner than any script; past four it is combinatorial and you should reach for JavaScript.

The glow is additive, not swapped. A soft pool fades in with either switch; a second, larger wash only appears when both are on. Because they stack rather than replace, the room brightening reads as more light rather than different light.

Each gang is still an independent rocker with its own label, its own perspective tip and its own accessible name — the plate is layout, not a control.

Make it yours

  • Three gangs: add a third switch and one more combination rule — but consider JavaScript at that point.
  • Warm/cool: give each gang a different glow hue and let them mix in the overlap.
  • Engraved labels: swap the printed tags for the inset text-shadow pair from demo 26.
  • Dimmer track: add a range input under the plate and drive the glow's opacity from its value.

Gotchas — read before shipping

  • Stacked has-[...] variants are an AND, not an OR. There is no or variant — "either on" needs two separate rules, which is exactly what the dim glow uses.
  • Id-based relational selectors (has-[#ttg-36-a:checked]) are fine for a fixed plate but do not survive being turned into a component — use data attributes there.
  • Keep the two rockers visually identical; a gang that looks different implies it does something different.
  • Full-viewport brightness changes must be disabled under motion-reduce:.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Entirely dependent on :has() (Firefox 121+); without it both rockers still work and the room stays at its resting light.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗perspectivetw ↗radial-gradient()tw ↗transitionstw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →