47 Tailwind CSS Toggles & Switches
20 / 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 Sliding Pill Toggle with Label Inside the Thumb

The label rides in the thumb: a wide pill whose sliding handle says "Draft" or "Live", crossfading its word mid-journey while ghost labels in the track show where a click will take you. Built for publish switches, where the state word must move with the control.

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-20 w-full min-h-svh flex flex-col items-center justify-center gap-6 px-5 py-14 bg-ttg20-bg font-ttg20-sans" aria-label="Sliding pill with travelling label">
  <div class="flex items-center gap-7 px-6 py-5 rounded-2xl bg-white border border-ttg20-edge shadow-[0_14px_32px_-26px_oklch(0.4_0.03_95/0.5)]">
    <span class="flex flex-col gap-0.5">
      <span id="ttg-20-l" class="text-[15px] font-semibold text-ttg20-ink">Article status</span>
      <span class="text-[12.5px] text-ttg20-mute">Live posts appear in the feed immediately</span>
    </span>
    <input type="checkbox" id="ttg-20-sw" role="switch" aria-labelledby="ttg-20-l" class="peer sr-only">
    <label for="ttg-20-sw" aria-hidden="true" class="relative shrink-0 w-41 h-11 rounded-3xl bg-ttg20-track cursor-pointer shadow-[inset_0_2px_5px_oklch(0.5_0.02_95/0.18)] peer-focus-visible:outline-3 peer-focus-visible:outline-ttg20-focus peer-focus-visible:outline-offset-3 peer-checked:[&_.ttg20-ghost-r]:opacity-0 peer-checked:[&_.ttg20-ghost-l]:opacity-100 peer-checked:[&_.ttg20-thumb]:translate-x-[78px] peer-checked:[&_.ttg20-thumb]:bg-ttg20-live peer-checked:[&_.ttg20-draft]:opacity-0 peer-checked:[&_.ttg20-live]:opacity-100">
      <span class="ttg20-ghost-l absolute inset-y-0 left-0 w-1/2 flex items-center justify-center text-[13px] font-bold text-ttg20-ghost opacity-0 transition-opacity duration-[350ms] motion-reduce:transition-none">Draft</span>
      <span class="ttg20-ghost-r absolute inset-y-0 right-0 w-1/2 flex items-center justify-center text-[13px] font-bold text-ttg20-ghost transition-opacity duration-[350ms] motion-reduce:transition-none">Live</span>
      <span class="ttg20-thumb absolute top-1 left-1 block w-[78px] h-9 rounded-[20px] bg-ttg20-draft shadow-[0_3px_8px_oklch(0.3_0.02_265/0.35)] transition-[transform,background-color] duration-[350ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none">
        <i class="ttg20-draft absolute inset-0 flex items-center justify-center not-italic text-[13.5px] font-extrabold tracking-[0.04em] text-white transition-opacity duration-[350ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none">Draft</i>
        <i class="ttg20-live absolute inset-0 flex items-center justify-center not-italic text-[13.5px] font-extrabold tracking-[0.04em] text-white opacity-0 transition-opacity duration-[350ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none">Live</i>
      </span>
    </label>
  </div>
  <p class="text-[12px] tracking-[0.12em] uppercase text-ttg20-mute">The word travels with the thumb</p>
</section>
@import "tailwindcss";

@theme {
  --color-ttg20-bg: #f6f6f2;
  --color-ttg20-bg: oklch(0.97 0.006 95);
  --color-ttg20-edge: #e7e6dd;
  --color-ttg20-edge: oklch(0.93 0.008 95);
  --color-ttg20-track: #eae9e0;
  --color-ttg20-track: oklch(0.93 0.01 95);
  --color-ttg20-ghost: #97958a;
  --color-ttg20-ghost: oklch(0.66 0.012 95);
  --color-ttg20-draft: #545b69;
  --color-ttg20-draft: oklch(0.47 0.02 265);
  --color-ttg20-live: #2f9e63;
  --color-ttg20-live: oklch(0.6 0.15 155);
  --color-ttg20-ink: #383b33;
  --color-ttg20-ink: oklch(0.35 0.012 110);
  --color-ttg20-mute: #8a887c;
  --color-ttg20-mute: oklch(0.62 0.012 95);
  --color-ttg20-focus: #3f63e0;
  --color-ttg20-focus: oklch(0.55 0.19 265);
  --font-ttg20-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-20 {
  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-ttg20-bg: #f6f6f2;
  --color-ttg20-bg: oklch(0.97 0.006 95);
  --color-ttg20-edge: #e7e6dd;
  --color-ttg20-edge: oklch(0.93 0.008 95);
  --color-ttg20-track: #eae9e0;
  --color-ttg20-track: oklch(0.93 0.01 95);
  --color-ttg20-ghost: #97958a;
  --color-ttg20-ghost: oklch(0.66 0.012 95);
  --color-ttg20-draft: #545b69;
  --color-ttg20-draft: oklch(0.47 0.02 265);
  --color-ttg20-live: #2f9e63;
  --color-ttg20-live: oklch(0.6 0.15 155);
  --color-ttg20-ink: #383b33;
  --color-ttg20-ink: oklch(0.35 0.012 110);
  --color-ttg20-mute: #8a887c;
  --color-ttg20-mute: oklch(0.62 0.012 95);
  --color-ttg20-focus: #3f63e0;
  --color-ttg20-focus: oklch(0.55 0.19 265);
  --font-ttg20-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-20 {
  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&display=swap">

What changed in the port

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

  • Five peer-checked:[&_.x]: rules on one label is the honest cost of a control with five moving parts. It is longer than the CSS original's five selectors — but all five now sit on the element that contains all five parts, instead of being scattered by specificity.
  • The thumb's own colour token is named --color-ttg20-draft rather than -off, because in this control the states are named things, not on/off. Token names that match the product language survive redesigns better.
  • Both ghost labels transition rather than one: the left ghost is hidden at rest and revealed on check, so the track always shows exactly the word you are not currently on.
  • UI change from the CSS original: the ghost ink lifted to oklch(0.66) (4.5:1 on the track, from 2.6:1 — the hint was previously almost invisible), the live green darkened for white text at 4.5:1, and the row gained a supporting line explaining what Live actually does, because a publish switch with no consequence stated is a support ticket.
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 Sliding Pill Toggle with Label Inside the Thumb
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-sliding-pill-toggle-label-inside-thumb/

The label rides in the thumb: a wide pill whose sliding handle says "Draft" or "Live", crossfading its word mid-journey while ghost labels in the track show where a click will take you. Built for publish switches, where the state word must move with the control.
## HTML
```html
<section class="ttg-20 w-full min-h-svh flex flex-col items-center justify-center gap-6 px-5 py-14 bg-ttg20-bg font-ttg20-sans" aria-label="Sliding pill with travelling label">
  <div class="flex items-center gap-7 px-6 py-5 rounded-2xl bg-white border border-ttg20-edge shadow-[0_14px_32px_-26px_oklch(0.4_0.03_95/0.5)]">
    <span class="flex flex-col gap-0.5">
      <span id="ttg-20-l" class="text-[15px] font-semibold text-ttg20-ink">Article status</span>
      <span class="text-[12.5px] text-ttg20-mute">Live posts appear in the feed immediately</span>
    </span>
    <input type="checkbox" id="ttg-20-sw" role="switch" aria-labelledby="ttg-20-l" class="peer sr-only">
    <label for="ttg-20-sw" aria-hidden="true" class="relative shrink-0 w-41 h-11 rounded-3xl bg-ttg20-track cursor-pointer shadow-[inset_0_2px_5px_oklch(0.5_0.02_95/0.18)] peer-focus-visible:outline-3 peer-focus-visible:outline-ttg20-focus peer-focus-visible:outline-offset-3 peer-checked:[&_.ttg20-ghost-r]:opacity-0 peer-checked:[&_.ttg20-ghost-l]:opacity-100 peer-checked:[&_.ttg20-thumb]:translate-x-[78px] peer-checked:[&_.ttg20-thumb]:bg-ttg20-live peer-checked:[&_.ttg20-draft]:opacity-0 peer-checked:[&_.ttg20-live]:opacity-100">
      <span class="ttg20-ghost-l absolute inset-y-0 left-0 w-1/2 flex items-center justify-center text-[13px] font-bold text-ttg20-ghost opacity-0 transition-opacity duration-[350ms] motion-reduce:transition-none">Draft</span>
      <span class="ttg20-ghost-r absolute inset-y-0 right-0 w-1/2 flex items-center justify-center text-[13px] font-bold text-ttg20-ghost transition-opacity duration-[350ms] motion-reduce:transition-none">Live</span>
      <span class="ttg20-thumb absolute top-1 left-1 block w-[78px] h-9 rounded-[20px] bg-ttg20-draft shadow-[0_3px_8px_oklch(0.3_0.02_265/0.35)] transition-[transform,background-color] duration-[350ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none">
        <i class="ttg20-draft absolute inset-0 flex items-center justify-center not-italic text-[13.5px] font-extrabold tracking-[0.04em] text-white transition-opacity duration-[350ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none">Draft</i>
        <i class="ttg20-live absolute inset-0 flex items-center justify-center not-italic text-[13.5px] font-extrabold tracking-[0.04em] text-white opacity-0 transition-opacity duration-[350ms] ease-[cubic-bezier(0.3,1,0.35,1.05)] motion-reduce:transition-none">Live</i>
      </span>
    </label>
  </div>
  <p class="text-[12px] tracking-[0.12em] uppercase text-ttg20-mute">The word travels with the thumb</p>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg20-bg: #f6f6f2;
  --color-ttg20-bg: oklch(0.97 0.006 95);
  --color-ttg20-edge: #e7e6dd;
  --color-ttg20-edge: oklch(0.93 0.008 95);
  --color-ttg20-track: #eae9e0;
  --color-ttg20-track: oklch(0.93 0.01 95);
  --color-ttg20-ghost: #97958a;
  --color-ttg20-ghost: oklch(0.66 0.012 95);
  --color-ttg20-draft: #545b69;
  --color-ttg20-draft: oklch(0.47 0.02 265);
  --color-ttg20-live: #2f9e63;
  --color-ttg20-live: oklch(0.6 0.15 155);
  --color-ttg20-ink: #383b33;
  --color-ttg20-ink: oklch(0.35 0.012 110);
  --color-ttg20-mute: #8a887c;
  --color-ttg20-mute: oklch(0.62 0.012 95);
  --color-ttg20-focus: #3f63e0;
  --color-ttg20-focus: oklch(0.55 0.19 265);
  --font-ttg20-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

How this works

The thumb is a pill, not a dot. It is half the track wide and holds both words absolutely stacked in the same box. Normal flow would resize the handle as the word changed — a 4px jitter mid-slide that is impossible to unsee once noticed.

Timing is the whole trick. The slide and the crossfade share duration-[350ms] and the same spring curve. Give the word a different duration and it arrives before or after the pill it is painted on, which destroys the illusion that the label is physically travelling.

Ghost labels teach the control. Faint "Draft" and "Live" at each end of the track show what the two positions mean before you touch it, and each fades as the thumb arrives over it — so the track never shows the same word twice.

Make it yours

  • Word pairs: Draft/Live, Private/Public, Test/Prod. Widen the track to the longest word plus travel.
  • Turn the ghost labels into hover-only hints (&ldquo;→ publish&rdquo;).
  • Square it off with rounded-[10px] for a segmented-control read.
  • Add a status dot inside the thumb that recolours with state, for a second non-text signal.

Gotchas — read before shipping

  • Both thumb words must share one box (absolute inset-0), or the handle resizes mid-slide.
  • Match the crossfade duration AND curve to the slide exactly.
  • The travelling word is presentational (aria-hidden); the real name and state live on the sr-only checkbox, bound with aria-labelledby.
  • Track width must fit the longest word inside a half-width thumb — "Scheduled" does not fit where "Draft" did.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Transforms and opacity only; no modern-CSS requirement beyond Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →