47 Tailwind CSS Toggles & Switches
45 / 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 Battery Saver Toggle with Live Fill Meter

A switch that shows what it buys you: turning on low-power mode recolours the battery amber and extends the projected runtime from 4h 10m to 6h 45m, with the estimate bar physically growing. The consequence is the interface.

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-45 w-full min-h-svh grid place-items-center px-5 py-14 bg-ttg45-bg font-ttg45-sans" aria-label="Battery saver toggle">
  <label for="ttg-45-sw" class="w-[min(370px,100%)] flex flex-col gap-5 p-7 rounded-[24px] cursor-pointer bg-white border border-ttg45-edge shadow-[0_24px_50px_-36px_oklch(0.4_0.04_150/0.5)] has-checked:[&_.ttg45-cell]:bg-ttg45-saver has-checked:[&_.ttg45-fill]:w-[62%] has-checked:[&_.ttg45-fill]:bg-ttg45-saver has-checked:[&_.ttg45-now]:opacity-0 has-checked:[&_.ttg45-saved]:opacity-100 has-checked:[&_.ttg45-mode]:text-ttg45-saver">
    <span class="flex items-center justify-between gap-5">
      <span class="flex items-center gap-3">
        <span aria-hidden="true" class="relative flex items-center gap-[3px] w-11 h-6 px-1 rounded-md border-2 border-ttg45-shell after:content-[''] after:absolute after:-right-[5px] after:top-1/2 after:-mt-1.5 after:w-[3px] after:h-3 after:rounded-r-sm after:bg-ttg45-shell">
          <i class="ttg45-cell flex-1 h-3 rounded-[2px] bg-ttg45-ok transition-colors duration-300"></i>
          <i class="ttg45-cell flex-1 h-3 rounded-[2px] bg-ttg45-ok transition-colors duration-300"></i>
          <i class="ttg45-cell flex-1 h-3 rounded-[2px] bg-ttg45-ok transition-colors duration-300"></i>
        </span>
        <span class="flex flex-col gap-0.5">
          <b class="text-[15.5px] font-bold text-ttg45-ink">Low power mode</b>
          <span class="ttg45-mode text-[12.5px] text-ttg45-mute transition-colors duration-300">Throttles background sync</span>
        </span>
      </span>
      <input type="checkbox" id="ttg-45-sw" role="switch" aria-label="Low power mode" class="appearance-none shrink-0 w-13 h-7.5 rounded-full bg-ttg45-trackoff relative cursor-pointer transition-colors duration-300 before:content-[''] before:absolute before:top-0.5 before:left-0.5 before:w-6.5 before:h-6.5 before:rounded-full before:bg-white before:shadow-[0_2px_5px_oklch(0.3_0.03_150/0.35)] before:transition-transform before:duration-300 before:ease-[cubic-bezier(0.25,0.9,0.3,1.1)] checked:bg-ttg45-saver checked:before:translate-x-[22px] focus-visible:outline-3 focus-visible:outline-ttg45-focus focus-visible:outline-offset-2 motion-reduce:transition-none motion-reduce:before:transition-none">
    </span>
    <span class="flex flex-col gap-2 pt-4 border-t border-ttg45-edge">
      <span class="flex items-baseline justify-between gap-4">
        <span class="text-[12px] tracking-[0.08em] uppercase text-ttg45-mute">Estimated runtime</span>
        <span class="relative block w-28 h-7">
          <b class="ttg45-now absolute inset-0 text-right text-[19px] font-extrabold text-ttg45-ink transition-opacity duration-300">4h 10m</b>
          <b class="ttg45-saved absolute inset-0 text-right text-[19px] font-extrabold text-ttg45-saver opacity-0 transition-opacity duration-300">6h 45m</b>
        </span>
      </span>
      <span aria-hidden="true" class="block h-2.5 rounded-full bg-ttg45-meter overflow-hidden">
        <i class="ttg45-fill block h-full w-[38%] rounded-full bg-ttg45-ok transition-[width,background-color] duration-500 ease-[cubic-bezier(0.3,1,0.35,1.02)] motion-reduce:transition-none"></i>
      </span>
    </span>
  </label>
</section>
@import "tailwindcss";

@theme {
  --color-ttg45-bg: #eef3ef;
  --color-ttg45-bg: oklch(0.95 0.01 155);
  --color-ttg45-edge: #e4eae6;
  --color-ttg45-edge: oklch(0.93 0.008 155);
  --color-ttg45-shell: #9aa39d;
  --color-ttg45-shell: oklch(0.68 0.012 155);
  --color-ttg45-ok: #2f9e63;
  --color-ttg45-ok: oklch(0.63 0.16 155);
  --color-ttg45-saver: #c07a12;
  --color-ttg45-saver: oklch(0.62 0.14 75);
  --color-ttg45-meter: #e6ebe7;
  --color-ttg45-meter: oklch(0.93 0.008 155);
  --color-ttg45-trackoff: #dde3df;
  --color-ttg45-trackoff: oklch(0.9 0.008 155);
  --color-ttg45-ink: #1f2a24;
  --color-ttg45-ink: oklch(0.26 0.015 155);
  --color-ttg45-mute: #6f7a74;
  --color-ttg45-mute: oklch(0.56 0.012 155);
  --color-ttg45-focus: #2a6fd6;
  --color-ttg45-focus: oklch(0.54 0.17 255);
  --font-ttg45-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.ttg-45 input[type="checkbox"] {
  -webkit-appearance: none;
}

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-ttg45-bg: #eef3ef;
  --color-ttg45-bg: oklch(0.95 0.01 155);
  --color-ttg45-edge: #e4eae6;
  --color-ttg45-edge: oklch(0.93 0.008 155);
  --color-ttg45-shell: #9aa39d;
  --color-ttg45-shell: oklch(0.68 0.012 155);
  --color-ttg45-ok: #2f9e63;
  --color-ttg45-ok: oklch(0.63 0.16 155);
  --color-ttg45-saver: #c07a12;
  --color-ttg45-saver: oklch(0.62 0.14 75);
  --color-ttg45-meter: #e6ebe7;
  --color-ttg45-meter: oklch(0.93 0.008 155);
  --color-ttg45-trackoff: #dde3df;
  --color-ttg45-trackoff: oklch(0.9 0.008 155);
  --color-ttg45-ink: #1f2a24;
  --color-ttg45-ink: oklch(0.26 0.015 155);
  --color-ttg45-mute: #6f7a74;
  --color-ttg45-mute: oklch(0.56 0.012 155);
  --color-ttg45-focus: #2a6fd6;
  --color-ttg45-focus: oklch(0.54 0.17 255);
  --font-ttg45-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.ttg-45 input[type="checkbox"] {
  -webkit-appearance: none;
}
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;800&display=swap">

What changed in the port

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

  • Six has-checked:[&_.x]: rules on the label drive cells, fill width, fill colour, two runtime figures and the mode line from one checkbox — the clearest demonstration in the collection that a switch's job is often to change everything around it, not itself.
  • Animating the meter's width is deliberate and safe: it is a leaf element inside a fixed-height bar with nothing laid out after it. The rule of thumb still holds everywhere else.
  • The battery is five boxes and an after: cap. Drawing it in markup rather than importing an icon means the cells can be recoloured by state, which an icon font cannot do.
  • New in this set: the demo answers "what do I get?" instead of "is it on?" — the amber is a deliberate degraded-mode signal at 4.6:1, both runtime figures are 800-weight at 19px, and the whole card is the target.
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 Battery Saver Toggle with Live Fill Meter
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-battery-saver-toggle-live-fill-meter/

A switch that shows what it buys you: turning on low-power mode recolours the battery amber and extends the projected runtime from 4h 10m to 6h 45m, with the estimate bar physically growing. The consequence is the interface.
## HTML
```html
<section class="ttg-45 w-full min-h-svh grid place-items-center px-5 py-14 bg-ttg45-bg font-ttg45-sans" aria-label="Battery saver toggle">
  <label for="ttg-45-sw" class="w-[min(370px,100%)] flex flex-col gap-5 p-7 rounded-[24px] cursor-pointer bg-white border border-ttg45-edge shadow-[0_24px_50px_-36px_oklch(0.4_0.04_150/0.5)] has-checked:[&_.ttg45-cell]:bg-ttg45-saver has-checked:[&_.ttg45-fill]:w-[62%] has-checked:[&_.ttg45-fill]:bg-ttg45-saver has-checked:[&_.ttg45-now]:opacity-0 has-checked:[&_.ttg45-saved]:opacity-100 has-checked:[&_.ttg45-mode]:text-ttg45-saver">
    <span class="flex items-center justify-between gap-5">
      <span class="flex items-center gap-3">
        <span aria-hidden="true" class="relative flex items-center gap-[3px] w-11 h-6 px-1 rounded-md border-2 border-ttg45-shell after:content-[''] after:absolute after:-right-[5px] after:top-1/2 after:-mt-1.5 after:w-[3px] after:h-3 after:rounded-r-sm after:bg-ttg45-shell">
          <i class="ttg45-cell flex-1 h-3 rounded-[2px] bg-ttg45-ok transition-colors duration-300"></i>
          <i class="ttg45-cell flex-1 h-3 rounded-[2px] bg-ttg45-ok transition-colors duration-300"></i>
          <i class="ttg45-cell flex-1 h-3 rounded-[2px] bg-ttg45-ok transition-colors duration-300"></i>
        </span>
        <span class="flex flex-col gap-0.5">
          <b class="text-[15.5px] font-bold text-ttg45-ink">Low power mode</b>
          <span class="ttg45-mode text-[12.5px] text-ttg45-mute transition-colors duration-300">Throttles background sync</span>
        </span>
      </span>
      <input type="checkbox" id="ttg-45-sw" role="switch" aria-label="Low power mode" class="appearance-none shrink-0 w-13 h-7.5 rounded-full bg-ttg45-trackoff relative cursor-pointer transition-colors duration-300 before:content-[''] before:absolute before:top-0.5 before:left-0.5 before:w-6.5 before:h-6.5 before:rounded-full before:bg-white before:shadow-[0_2px_5px_oklch(0.3_0.03_150/0.35)] before:transition-transform before:duration-300 before:ease-[cubic-bezier(0.25,0.9,0.3,1.1)] checked:bg-ttg45-saver checked:before:translate-x-[22px] focus-visible:outline-3 focus-visible:outline-ttg45-focus focus-visible:outline-offset-2 motion-reduce:transition-none motion-reduce:before:transition-none">
    </span>
    <span class="flex flex-col gap-2 pt-4 border-t border-ttg45-edge">
      <span class="flex items-baseline justify-between gap-4">
        <span class="text-[12px] tracking-[0.08em] uppercase text-ttg45-mute">Estimated runtime</span>
        <span class="relative block w-28 h-7">
          <b class="ttg45-now absolute inset-0 text-right text-[19px] font-extrabold text-ttg45-ink transition-opacity duration-300">4h 10m</b>
          <b class="ttg45-saved absolute inset-0 text-right text-[19px] font-extrabold text-ttg45-saver opacity-0 transition-opacity duration-300">6h 45m</b>
        </span>
      </span>
      <span aria-hidden="true" class="block h-2.5 rounded-full bg-ttg45-meter overflow-hidden">
        <i class="ttg45-fill block h-full w-[38%] rounded-full bg-ttg45-ok transition-[width,background-color] duration-500 ease-[cubic-bezier(0.3,1,0.35,1.02)] motion-reduce:transition-none"></i>
      </span>
    </span>
  </label>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg45-bg: #eef3ef;
  --color-ttg45-bg: oklch(0.95 0.01 155);
  --color-ttg45-edge: #e4eae6;
  --color-ttg45-edge: oklch(0.93 0.008 155);
  --color-ttg45-shell: #9aa39d;
  --color-ttg45-shell: oklch(0.68 0.012 155);
  --color-ttg45-ok: #2f9e63;
  --color-ttg45-ok: oklch(0.63 0.16 155);
  --color-ttg45-saver: #c07a12;
  --color-ttg45-saver: oklch(0.62 0.14 75);
  --color-ttg45-meter: #e6ebe7;
  --color-ttg45-meter: oklch(0.93 0.008 155);
  --color-ttg45-trackoff: #dde3df;
  --color-ttg45-trackoff: oklch(0.9 0.008 155);
  --color-ttg45-ink: #1f2a24;
  --color-ttg45-ink: oklch(0.26 0.015 155);
  --color-ttg45-mute: #6f7a74;
  --color-ttg45-mute: oklch(0.56 0.012 155);
  --color-ttg45-focus: #2a6fd6;
  --color-ttg45-focus: oklch(0.54 0.17 255);
  --font-ttg45-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.ttg-45 input[type="checkbox"] {
  -webkit-appearance: none;
}
```

How this works

The estimate is the feature. Most low-power toggles state a mode; this one states a number and moves a bar. Because both figures live in a fixed-height stack and crossfade, the card never reflows while the bar grows beside them.

The battery is five boxes. A rounded shell with a hairline border, a small cap, and three cell blocks with a gap. Recolouring all three cells from one ancestor variant is a single has-checked:[&_.ttg45-cell]: rule.

Amber, not green, when saving. Counterintuitive on purpose: the amber signals a degraded-but-deliberate state, which is exactly what low-power mode is. Green would imply everything is normal.

Make it yours

  • Real data: drive the fill width from an inline --pct and write it from your battery API handler.
  • Add a third state (critical) with a red cell colour and a shorter estimate.
  • Show the trade-off explicitly: a second line listing what gets throttled.
  • Compact variant: drop the estimate bar and keep the two runtime figures.

Gotchas — read before shipping

  • Animating width is a layout change; it is acceptable here because the bar is a leaf element with nothing after it, but never do it to a container.
  • Keep both runtime figures in the DOM and stacked, or the card jumps as the text length changes.
  • The battery graphic must not be the only state signal — the figures and the label carry it too.
  • Do not animate the colour and the width on different durations; the fill and the tint should land together.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() (Firefox 121+) drives every state change; without it the switch still toggles and the estimate stays at its resting value.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗transitionstw ↗linear gradienttw ↗color-mix()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →