47 Tailwind CSS Toggles & Switches
07 / 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 SaaS Pricing Toggle — Monthly / Annually Segmented Pill

The billing switcher every pricing page ships: two sr-only radios, a highlight pill that glides behind the active label, a save badge, and a price that live-swaps underneath — all from peer-checked: and one has-checked: on the card. Radios mean arrow-key navigation comes free.

Live Demo
Plain CSSTailwind v4
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-07 w-full min-h-svh grid place-items-center px-5 py-14 bg-ttg07-bg font-ttg07-sans" aria-label="Pricing period toggle">
  <div class="w-[min(360px,100%)] flex flex-col items-center gap-5 p-7 rounded-[26px] bg-white shadow-[0_30px_60px_-40px_oklch(0.4_0.12_285/0.55)] border border-ttg07-edge has-[.ttg07-y:checked]:[&_.ttg07-pm]:opacity-0 has-[.ttg07-y:checked]:[&_.ttg07-pm]:-translate-y-2 has-[.ttg07-y:checked]:[&_.ttg07-py]:opacity-100 has-[.ttg07-y:checked]:[&_.ttg07-py]:translate-y-0">
    <div role="radiogroup" aria-label="Billing period" class="relative w-full grid grid-cols-2 p-1 rounded-full bg-ttg07-tint">
      <input type="radio" name="ttg-07" id="ttg-07-m" checked class="peer/monthly sr-only">
      <input type="radio" name="ttg-07" id="ttg-07-y" class="ttg07-y peer/yearly sr-only">
      <span aria-hidden="true" class="absolute top-1 left-1 z-0 w-[calc(50%-4px)] h-[calc(100%-8px)] rounded-full bg-ttg07-acc shadow-[0_6px_16px_-6px_oklch(0.5_0.19_285/0.75)] transition-transform duration-[350ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] peer-checked/yearly:translate-x-full motion-reduce:duration-100"></span>
      <label for="ttg-07-m" class="relative z-10 flex items-center justify-center min-h-11 rounded-full text-[14px] font-bold cursor-pointer transition-colors duration-200 text-ttg07-mute peer-checked/monthly:text-white">Monthly</label>
      <label for="ttg-07-y" class="relative z-10 flex items-center justify-center gap-1.5 min-h-11 rounded-full text-[14px] font-bold cursor-pointer transition-colors duration-200 text-ttg07-mute peer-checked/yearly:text-white">
        Annually
        <em class="not-italic text-[11px] font-extrabold px-1.5 py-0.5 rounded-full bg-ttg07-savebg text-ttg07-saveink transition-colors duration-200 peer-checked/yearly:bg-white/25 peer-checked/yearly:text-white">&minus;20%</em>
      </label>
    </div>
    <div class="relative w-full h-14">
      <p class="ttg07-pm absolute inset-0 flex items-baseline justify-center gap-2 transition-[opacity,transform] duration-300 motion-reduce:transition-opacity"><b class="text-[40px] font-extrabold tracking-[-0.02em] text-ttg07-ink">$24</b><span class="text-[13px] text-ttg07-mute">/mo &middot; billed monthly</span></p>
      <p class="ttg07-py absolute inset-0 flex items-baseline justify-center gap-2 opacity-0 translate-y-2 transition-[opacity,transform] duration-300 motion-reduce:transition-opacity"><b class="text-[40px] font-extrabold tracking-[-0.02em] text-ttg07-ink">$19</b><span class="text-[13px] text-ttg07-mute">/mo &middot; billed yearly</span></p>
    </div>
    <p class="text-[12.5px] text-ttg07-mute">Pro plan &middot; unlimited projects</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-ttg07-bg: #f5f4fb;
  --color-ttg07-bg: oklch(0.96 0.01 285);
  --color-ttg07-edge: #eae8f4;
  --color-ttg07-edge: oklch(0.93 0.012 285);
  --color-ttg07-tint: #edebf6;
  --color-ttg07-tint: oklch(0.94 0.014 285);
  --color-ttg07-acc: #5b4ae0;
  --color-ttg07-acc: oklch(0.52 0.19 285);
  --color-ttg07-ink: #201b38;
  --color-ttg07-ink: oklch(0.25 0.04 285);
  --color-ttg07-mute: #6f6a86;
  --color-ttg07-mute: oklch(0.55 0.03 285);
  --color-ttg07-savebg: #cdf0dc;
  --color-ttg07-savebg: oklch(0.91 0.08 155);
  --color-ttg07-saveink: #1f6b45;
  --color-ttg07-saveink: oklch(0.45 0.11 155);
  --font-ttg07-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-07 {
  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-ttg07-bg: #f5f4fb;
  --color-ttg07-bg: oklch(0.96 0.01 285);
  --color-ttg07-edge: #eae8f4;
  --color-ttg07-edge: oklch(0.93 0.012 285);
  --color-ttg07-tint: #edebf6;
  --color-ttg07-tint: oklch(0.94 0.014 285);
  --color-ttg07-acc: #5b4ae0;
  --color-ttg07-acc: oklch(0.52 0.19 285);
  --color-ttg07-ink: #201b38;
  --color-ttg07-ink: oklch(0.25 0.04 285);
  --color-ttg07-mute: #6f6a86;
  --color-ttg07-mute: oklch(0.55 0.03 285);
  --color-ttg07-savebg: #cdf0dc;
  --color-ttg07-savebg: oklch(0.91 0.08 155);
  --color-ttg07-saveink: #1f6b45;
  --color-ttg07-saveink: oklch(0.45 0.11 155);
  --font-ttg07-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-07 {
  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;800&family=JetBrains+Mono:wght@400;500&display=swap">

What changed in the port

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

  • Named peers (peer/monthly, peer/yearly) are the feature that makes this port cleaner than the original, which addressed its radios with :nth-of-type() chains — brittle the moment a third period is added. Names survive reordering.
  • The price swap lives on the CARD, not on the price wrapper: has-[.ttg07-y:checked]:[&_.ttg07-pm]:opacity-0. This is the port's sharpest trap — :has() only ever looks DOWNWARD, and the price wrapper contains no radio, so the same variants written there compile fine and silently never match. The condition has to sit on the nearest ancestor that contains both the input and the thing that reacts.
  • The save badge inverts inside the pill via peer-checked/yearly:bg-white/25, a one-utility state change that the CSS version needed a descendant selector for.
  • UI change from the CSS original: labels grew from 10px vertical padding to a 44px minimum touch target, the muted label ink went from #6b6683 to oklch(0.55 0.03 285) for 4.9:1 on the tint, and the badge ink darkened to oklch(0.45 0.11 155) — at 11px the original green was below 3: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 SaaS Pricing Toggle — Monthly / Annually Segmented Pill
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-saas-pricing-toggle-monthly-annually-segmented-pill/

The billing switcher every pricing page ships: two sr-only radios, a highlight pill that glides behind the active label, a save badge, and a price that live-swaps underneath &mdash; all from peer-checked: and one has-checked: on the card. Radios mean arrow-key navigation comes free.
## HTML
```html
<section class="ttg-07 w-full min-h-svh grid place-items-center px-5 py-14 bg-ttg07-bg font-ttg07-sans" aria-label="Pricing period toggle">
  <div class="w-[min(360px,100%)] flex flex-col items-center gap-5 p-7 rounded-[26px] bg-white shadow-[0_30px_60px_-40px_oklch(0.4_0.12_285/0.55)] border border-ttg07-edge has-[.ttg07-y:checked]:[&_.ttg07-pm]:opacity-0 has-[.ttg07-y:checked]:[&_.ttg07-pm]:-translate-y-2 has-[.ttg07-y:checked]:[&_.ttg07-py]:opacity-100 has-[.ttg07-y:checked]:[&_.ttg07-py]:translate-y-0">
    <div role="radiogroup" aria-label="Billing period" class="relative w-full grid grid-cols-2 p-1 rounded-full bg-ttg07-tint">
      <input type="radio" name="ttg-07" id="ttg-07-m" checked class="peer/monthly sr-only">
      <input type="radio" name="ttg-07" id="ttg-07-y" class="ttg07-y peer/yearly sr-only">
      <span aria-hidden="true" class="absolute top-1 left-1 z-0 w-[calc(50%-4px)] h-[calc(100%-8px)] rounded-full bg-ttg07-acc shadow-[0_6px_16px_-6px_oklch(0.5_0.19_285/0.75)] transition-transform duration-[350ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] peer-checked/yearly:translate-x-full motion-reduce:duration-100"></span>
      <label for="ttg-07-m" class="relative z-10 flex items-center justify-center min-h-11 rounded-full text-[14px] font-bold cursor-pointer transition-colors duration-200 text-ttg07-mute peer-checked/monthly:text-white">Monthly</label>
      <label for="ttg-07-y" class="relative z-10 flex items-center justify-center gap-1.5 min-h-11 rounded-full text-[14px] font-bold cursor-pointer transition-colors duration-200 text-ttg07-mute peer-checked/yearly:text-white">
        Annually
        <em class="not-italic text-[11px] font-extrabold px-1.5 py-0.5 rounded-full bg-ttg07-savebg text-ttg07-saveink transition-colors duration-200 peer-checked/yearly:bg-white/25 peer-checked/yearly:text-white">&minus;20%</em>
      </label>
    </div>
    <div class="relative w-full h-14">
      <p class="ttg07-pm absolute inset-0 flex items-baseline justify-center gap-2 transition-[opacity,transform] duration-300 motion-reduce:transition-opacity"><b class="text-[40px] font-extrabold tracking-[-0.02em] text-ttg07-ink">$24</b><span class="text-[13px] text-ttg07-mute">/mo &middot; billed monthly</span></p>
      <p class="ttg07-py absolute inset-0 flex items-baseline justify-center gap-2 opacity-0 translate-y-2 transition-[opacity,transform] duration-300 motion-reduce:transition-opacity"><b class="text-[40px] font-extrabold tracking-[-0.02em] text-ttg07-ink">$19</b><span class="text-[13px] text-ttg07-mute">/mo &middot; billed yearly</span></p>
    </div>
    <p class="text-[12.5px] text-ttg07-mute">Pro plan &middot; unlimited projects</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg07-bg: #f5f4fb;
  --color-ttg07-bg: oklch(0.96 0.01 285);
  --color-ttg07-edge: #eae8f4;
  --color-ttg07-edge: oklch(0.93 0.012 285);
  --color-ttg07-tint: #edebf6;
  --color-ttg07-tint: oklch(0.94 0.014 285);
  --color-ttg07-acc: #5b4ae0;
  --color-ttg07-acc: oklch(0.52 0.19 285);
  --color-ttg07-ink: #201b38;
  --color-ttg07-ink: oklch(0.25 0.04 285);
  --color-ttg07-mute: #6f6a86;
  --color-ttg07-mute: oklch(0.55 0.03 285);
  --color-ttg07-savebg: #cdf0dc;
  --color-ttg07-savebg: oklch(0.91 0.08 155);
  --color-ttg07-saveink: #1f6b45;
  --color-ttg07-saveink: oklch(0.45 0.11 155);
  --font-ttg07-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

How this works

Named peers do the heavy lifting. Tailwind lets a peer carry a name — peer/yearly — so a container with two inputs can address each one separately: peer-checked/yearly:translate-x-full moves the pill only when the annual radio is checked. Without names, a second peer in the same scope is ambiguous.

Radios, not a checkbox. Two inputs sharing a name give native single-choice semantics, arrow-key navigation inside the group and correct role="radiogroup" announcement. Rebuilding that with a checkbox and JavaScript is the most common way this component is made worse.

The price swap is a :has() on the card. The two price blocks are absolutely stacked and crossfaded; the card reads the radio state through has-[.ttg07-y:checked]: and swaps which one is visible. Both blocks stay in the DOM, so the card never reflows and Cumulative Layout Shift stays at zero during the switch.

Make it yours

  • Add a third period: grid-cols-3, pill width w-[calc(33.333%-4px)], and a translate-x-[200%] rule for the third radio.
  • Move the save badge inside the pill for a tighter composition.
  • Swap the crossfade for an odometer roll: translate the price stack on the Y axis instead of fading.
  • Wire real checkout by giving each label a data-plan attribute your handler reads.

Gotchas — read before shipping

  • Keep the radios sr-only, never hidden — arrow-key group navigation is free native behaviour you do not want to rebuild.
  • The highlight pill must sit behind the label text (z-0 vs relative z-10) or it swallows their clicks.
  • Animate the pill with translate-x, not left. This component runs on checkout pages, where INP is measured in money.
  • Both price blocks must be absolute in a fixed-height parent. Toggling hidden instead would reflow the card on every switch.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

The segmented control itself works everywhere; the price crossfade uses :has() (Firefox 121+). Without it, the monthly price stays visible and the control still switches correctly.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →