47 Tailwind CSS Toggles & Switches
35 / 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 Material 3 Connected Icon Toggle Buttons

M3's other switch: a connected group of icon toggle buttons where each segment is independently on or off, the ends are fully rounded, and a selected segment fills with the secondary container tone and grows a check. Multi-select, not a radio group.

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-35 w-full min-h-svh flex flex-col items-center justify-center gap-6 px-5 py-14 bg-ttg35-bg font-ttg35-sans" aria-label="Material 3 icon toggle buttons">
  <div class="flex flex-col items-center gap-4 px-7 py-6 rounded-[24px] bg-ttg35-surface border border-ttg35-edge">
    <p class="text-[12px] tracking-[0.08em] uppercase text-ttg35-mute">Text style</p>
    <div class="flex" role="group" aria-label="Text style">
      <span class="relative">
        <input type="checkbox" id="ttg-35-b" checked aria-label="Bold" class="peer sr-only">
        <label for="ttg-35-b" class="flex items-center gap-1 min-h-11 px-5 rounded-l-full border border-ttg35-outline cursor-pointer text-[14px] font-medium text-ttg35-ink transition-[background-color,color] duration-200 hover:bg-ttg35-layer/10 peer-checked:bg-ttg35-fill peer-checked:text-ttg35-onfill peer-focus-visible:outline-3 peer-focus-visible:outline-ttg35-primary peer-focus-visible:outline-offset-2 peer-checked:[&_.ttg35-check]:w-4.5 peer-checked:[&_.ttg35-check]:opacity-100">
          <svg viewBox="0 0 18 18" class="ttg35-check w-0 h-4.5 opacity-0 overflow-hidden transition-[width,opacity] duration-200" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9.5l4 4L15 5"/></svg>
          <b class="font-bold">B</b>
        </label>
      </span>
      <span class="relative -ml-px">
        <input type="checkbox" id="ttg-35-i" aria-label="Italic" class="peer sr-only">
        <label for="ttg-35-i" class="flex items-center gap-1 min-h-11 px-5 border border-ttg35-outline cursor-pointer text-[14px] font-medium text-ttg35-ink transition-[background-color,color] duration-200 hover:bg-ttg35-layer/10 peer-checked:bg-ttg35-fill peer-checked:text-ttg35-onfill peer-focus-visible:outline-3 peer-focus-visible:outline-ttg35-primary peer-focus-visible:outline-offset-2 peer-checked:[&_.ttg35-check]:w-4.5 peer-checked:[&_.ttg35-check]:opacity-100">
          <svg viewBox="0 0 18 18" class="ttg35-check w-0 h-4.5 opacity-0 overflow-hidden transition-[width,opacity] duration-200" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9.5l4 4L15 5"/></svg>
          <i class="font-serif">I</i>
        </label>
      </span>
      <span class="relative -ml-px">
        <input type="checkbox" id="ttg-35-u" checked aria-label="Underline" class="peer sr-only">
        <label for="ttg-35-u" class="flex items-center gap-1 min-h-11 px-5 rounded-r-full border border-ttg35-outline cursor-pointer text-[14px] font-medium text-ttg35-ink transition-[background-color,color] duration-200 hover:bg-ttg35-layer/10 peer-checked:bg-ttg35-fill peer-checked:text-ttg35-onfill peer-focus-visible:outline-3 peer-focus-visible:outline-ttg35-primary peer-focus-visible:outline-offset-2 peer-checked:[&_.ttg35-check]:w-4.5 peer-checked:[&_.ttg35-check]:opacity-100">
          <svg viewBox="0 0 18 18" class="ttg35-check w-0 h-4.5 opacity-0 overflow-hidden transition-[width,opacity] duration-200" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9.5l4 4L15 5"/></svg>
          <span class="underline underline-offset-4">U</span>
        </label>
      </span>
    </div>
    <p class="text-[12.5px] text-ttg35-mute">Each segment toggles on its own &mdash; checkboxes, not radios</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-ttg35-bg: #fdf7ff;
  --color-ttg35-bg: oklch(0.98 0.012 310);
  --color-ttg35-surface: #ffffff;
  --color-ttg35-surface: oklch(1 0 0);
  --color-ttg35-edge: #e7e0ec;
  --color-ttg35-edge: oklch(0.91 0.012 310);
  --color-ttg35-outline: #78727f;
  --color-ttg35-outline: oklch(0.55 0.02 300);
  --color-ttg35-primary: #6750a4;
  --color-ttg35-primary: oklch(0.47 0.13 296);
  --color-ttg35-fill: #e5ddf8;
  --color-ttg35-fill: oklch(0.9 0.05 296);
  --color-ttg35-onfill: #251a47;
  --color-ttg35-onfill: oklch(0.28 0.08 296);
  --color-ttg35-layer: #6750a4;
  --color-ttg35-layer: oklch(0.47 0.13 296);
  --color-ttg35-ink: #1d1b20;
  --color-ttg35-ink: oklch(0.23 0.008 300);
  --color-ttg35-mute: #6b6572;
  --color-ttg35-mute: oklch(0.51 0.018 300);
  --font-ttg35-sans: Roboto, 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-35 {
  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-ttg35-bg: #fdf7ff;
  --color-ttg35-bg: oklch(0.98 0.012 310);
  --color-ttg35-surface: #ffffff;
  --color-ttg35-surface: oklch(1 0 0);
  --color-ttg35-edge: #e7e0ec;
  --color-ttg35-edge: oklch(0.91 0.012 310);
  --color-ttg35-outline: #78727f;
  --color-ttg35-outline: oklch(0.55 0.02 300);
  --color-ttg35-primary: #6750a4;
  --color-ttg35-primary: oklch(0.47 0.13 296);
  --color-ttg35-fill: #e5ddf8;
  --color-ttg35-fill: oklch(0.9 0.05 296);
  --color-ttg35-onfill: #251a47;
  --color-ttg35-onfill: oklch(0.28 0.08 296);
  --color-ttg35-layer: #6750a4;
  --color-ttg35-layer: oklch(0.47 0.13 296);
  --color-ttg35-ink: #1d1b20;
  --color-ttg35-ink: oklch(0.23 0.008 300);
  --color-ttg35-mute: #6b6572;
  --color-ttg35-mute: oklch(0.51 0.018 300);
  --font-ttg35-sans: Roboto, 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-35 {
  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=Roboto:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap">

What changed in the port

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

  • Where demo 14 ports the M3 switch, this ports the M3 selection model: one checkbox per segment, so the group is genuinely multi-select and a segment can be turned back off — which a radio group cannot do.
  • first:rounded-l-full last:rounded-r-full plus -ml-px is the whole connected-group shape. In the CSS original this kind of thing is four selectors and a comment explaining the overlap.
  • The tick animates width from 0 to 18px, which is the one place animating a size is correct: it is supposed to push the label, and the reflow is scoped inside a single segment.
  • UI upgrade over demo 14: the filled state uses the secondary-container tone with oklch(0.28) ink for 9:1 rather than white on primary, segments hold a 44px minimum height, and the caption states the semantics (checkboxes, not radios) because that is the decision people get wrong when they copy a segmented control.
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 Material 3 Connected Icon Toggle Buttons
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-material-3-connected-icon-toggle-buttons/

M3's other switch: a connected group of icon toggle buttons where each segment is independently on or off, the ends are fully rounded, and a selected segment fills with the secondary container tone and grows a check. Multi-select, not a radio group.
## HTML
```html
<section class="ttg-35 w-full min-h-svh flex flex-col items-center justify-center gap-6 px-5 py-14 bg-ttg35-bg font-ttg35-sans" aria-label="Material 3 icon toggle buttons">
  <div class="flex flex-col items-center gap-4 px-7 py-6 rounded-[24px] bg-ttg35-surface border border-ttg35-edge">
    <p class="text-[12px] tracking-[0.08em] uppercase text-ttg35-mute">Text style</p>
    <div class="flex" role="group" aria-label="Text style">
      <span class="relative">
        <input type="checkbox" id="ttg-35-b" checked aria-label="Bold" class="peer sr-only">
        <label for="ttg-35-b" class="flex items-center gap-1 min-h-11 px-5 rounded-l-full border border-ttg35-outline cursor-pointer text-[14px] font-medium text-ttg35-ink transition-[background-color,color] duration-200 hover:bg-ttg35-layer/10 peer-checked:bg-ttg35-fill peer-checked:text-ttg35-onfill peer-focus-visible:outline-3 peer-focus-visible:outline-ttg35-primary peer-focus-visible:outline-offset-2 peer-checked:[&_.ttg35-check]:w-4.5 peer-checked:[&_.ttg35-check]:opacity-100">
          <svg viewBox="0 0 18 18" class="ttg35-check w-0 h-4.5 opacity-0 overflow-hidden transition-[width,opacity] duration-200" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9.5l4 4L15 5"/></svg>
          <b class="font-bold">B</b>
        </label>
      </span>
      <span class="relative -ml-px">
        <input type="checkbox" id="ttg-35-i" aria-label="Italic" class="peer sr-only">
        <label for="ttg-35-i" class="flex items-center gap-1 min-h-11 px-5 border border-ttg35-outline cursor-pointer text-[14px] font-medium text-ttg35-ink transition-[background-color,color] duration-200 hover:bg-ttg35-layer/10 peer-checked:bg-ttg35-fill peer-checked:text-ttg35-onfill peer-focus-visible:outline-3 peer-focus-visible:outline-ttg35-primary peer-focus-visible:outline-offset-2 peer-checked:[&_.ttg35-check]:w-4.5 peer-checked:[&_.ttg35-check]:opacity-100">
          <svg viewBox="0 0 18 18" class="ttg35-check w-0 h-4.5 opacity-0 overflow-hidden transition-[width,opacity] duration-200" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9.5l4 4L15 5"/></svg>
          <i class="font-serif">I</i>
        </label>
      </span>
      <span class="relative -ml-px">
        <input type="checkbox" id="ttg-35-u" checked aria-label="Underline" class="peer sr-only">
        <label for="ttg-35-u" class="flex items-center gap-1 min-h-11 px-5 rounded-r-full border border-ttg35-outline cursor-pointer text-[14px] font-medium text-ttg35-ink transition-[background-color,color] duration-200 hover:bg-ttg35-layer/10 peer-checked:bg-ttg35-fill peer-checked:text-ttg35-onfill peer-focus-visible:outline-3 peer-focus-visible:outline-ttg35-primary peer-focus-visible:outline-offset-2 peer-checked:[&_.ttg35-check]:w-4.5 peer-checked:[&_.ttg35-check]:opacity-100">
          <svg viewBox="0 0 18 18" class="ttg35-check w-0 h-4.5 opacity-0 overflow-hidden transition-[width,opacity] duration-200" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9.5l4 4L15 5"/></svg>
          <span class="underline underline-offset-4">U</span>
        </label>
      </span>
    </div>
    <p class="text-[12.5px] text-ttg35-mute">Each segment toggles on its own &mdash; checkboxes, not radios</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg35-bg: #fdf7ff;
  --color-ttg35-bg: oklch(0.98 0.012 310);
  --color-ttg35-surface: #ffffff;
  --color-ttg35-surface: oklch(1 0 0);
  --color-ttg35-edge: #e7e0ec;
  --color-ttg35-edge: oklch(0.91 0.012 310);
  --color-ttg35-outline: #78727f;
  --color-ttg35-outline: oklch(0.55 0.02 300);
  --color-ttg35-primary: #6750a4;
  --color-ttg35-primary: oklch(0.47 0.13 296);
  --color-ttg35-fill: #e5ddf8;
  --color-ttg35-fill: oklch(0.9 0.05 296);
  --color-ttg35-onfill: #251a47;
  --color-ttg35-onfill: oklch(0.28 0.08 296);
  --color-ttg35-layer: #6750a4;
  --color-ttg35-layer: oklch(0.47 0.13 296);
  --color-ttg35-ink: #1d1b20;
  --color-ttg35-ink: oklch(0.23 0.008 300);
  --color-ttg35-mute: #6b6572;
  --color-ttg35-mute: oklch(0.51 0.018 300);
  --font-ttg35-sans: Roboto, 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

How this works

Each segment is a checkbox, so the group is multi-select. That is the difference from demo 07's radios: here "Bold" and "Italic" can both be on. Using radios for a multi-select group — or checkboxes for a single choice — is the most common semantics error in segmented controls.

The check earns its space. Unselected, the tick is w-0 opacity-0; selected, it animates to w-4.5 and pushes the label right. Width plus opacity, both transitioned, gives M3's characteristic settle without any layout jump outside the segment.

Connected means one border, not three. Segments share edges via -ml-px over a common outline, and only the outer ends are rounded — so the group reads as one object with internal divisions.

Make it yours

  • Single-select variant: swap the checkboxes for radios sharing a name; every style stays.
  • Vertical group: flex-col with first:rounded-t-full last:rounded-b-full and -mt-px.
  • Icon-only: drop the labels and set a square aspect — keep aria-label on every input.
  • Retheme with the three M3 tokens; the state layer derives from the same tone.

Gotchas — read before shipping

  • Multi-select needs checkboxes. Radios cannot be deselected, which is why a radio-based "toolbar" always feels broken.
  • Every icon-only segment needs a real accessible name on its input — the glyph is decoration and must be aria-hidden.
  • Animating the tick's width is fine at 18px but must never be done to the whole segment, or the group reflows on every click.
  • Keep segments at least 44px tall; a connected group makes them look smaller than they are.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Sibling variants, borders and transitions only — no modern-CSS requirement beyond Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →