29 Tailwind CSS Checkboxes
07 / 29

All 29 in 29 Tailwind CSS Checkboxes

  1. 01Tailwind CSS Toggle Switch — iOS-Style SaaS Settings
  2. 02Tailwind Filter Chip Checkbox — Style Checkbox as Button
  3. 03Tailwind Pricing Plan Card Select — Checkbox-Style Selectable Cards
  4. 04Pure Tailwind CSS Accordion with Checkbox — No JavaScript
  5. 05Tailwind Indeterminate Checkbox — Select All with Tri-State
  6. 06Accessible Custom Checkbox in Tailwind CSS — WCAG Focus Ring
  7. 07Tailwind Slide Toggle with ON/OFF Labels — GPU translate3d
  8. 08Neon Glow Checkbox in Tailwind CSS — Dark Mode Gaming UI
  9. 09Animated SVG Checkmark in Tailwind CSS — stroke-dashoffset Draw
  10. 10Bouncy Checkbox Animation in Tailwind CSS — Spring cubic-bezier
  11. 11Glassmorphism Checkbox in Tailwind CSS — backdrop-blur Frosted Glass
  12. 12Neumorphism Checkbox in Tailwind CSS — Soft UI
  13. 13Liquid Fill Checkbox Animation in Tailwind CSS — Water Wave
  14. 14Rotating Ring Checkbox in Tailwind CSS — Spin-to-Check
  15. 15Brutalist Checkbox in Tailwind CSS — Neo-Brutalism Hard Shadow
  16. 16Animated Gradient Checkbox in Tailwind CSS — Rainbow Sweep
  17. 173D Flip Checkbox in Tailwind CSS — perspective & backface-hidden
  18. 18Material Ripple Checkbox in Tailwind CSS — State Layer & Wave
  19. 19Retro Pixel Art Checkbox in Tailwind CSS — 8-Bit Arcade Menu
  20. 20Tailwind CSS To-Do List Checkbox with Animated Strikethrough
  21. 21Gooey Blob Checkbox in Tailwind CSS — blur + contrast Filter
  22. 22Tailwind Dark Mode Toggle Switch — Sun & Moon, No JavaScript
  23. 23Pulse Ring Checkbox in Tailwind CSS — Live Status Indicator
  24. 24Tailwind CSS Dash-to-Check SVG Morph Checkbox
  25. 25Tri-State Checkbox in Tailwind CSS + JavaScript — Done / N/A / Unset
  26. 26Magnetic Hover Checkbox in Tailwind CSS + JavaScript
  27. 27Confetti Checkbox Animation in Tailwind CSS — Pure CSS Particle Burst
  28. 28Slide-In Label Checkbox in Tailwind CSS — Saved Tag Reveal
  29. 29Aurora Gradient Toggle Switch in Tailwind CSS — Premium Dark UI
Pure TailwindMIT licensed

Tailwind Slide Toggle with ON/OFF Labels — GPU translate3d

A wider switch that prints ON and OFF inside its own track via before:content-['ON'] / after:content-['OFF'], cross-fading on group-has-checked:. The thumb glides on transform-gpu with will-change-transform, and each row card picks up an accent edge when on.

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="tcb-07 w-full min-h-svh grid place-items-center bg-tcb07-bg px-5 py-14 font-tcb07-sans text-tcb07-ink selection:bg-tcb07-acc selection:text-white" aria-label="Smooth slide toggles">
  <div class="flex w-full max-w-[25rem] flex-col gap-3.5">
    <label class="group flex min-h-15 cursor-pointer items-center justify-between gap-4 rounded-xl border border-tcb07-line bg-white px-4.5 py-3.5 transition-colors duration-300 has-checked:border-tcb07-acc/40"><span class="text-[15px] font-semibold">Auto-save drafts</span>
      <input type="checkbox" class="peer sr-only" checked>
      <span aria-hidden="true" class="relative h-[30px] w-[66px] flex-none overflow-hidden rounded-full bg-tcb07-off font-tcb07-mono text-[10px] font-bold tracking-[0.1em] transition-colors duration-300 peer-checked:bg-tcb07-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb07-acc before:absolute before:left-[11px] before:top-0 before:flex before:h-full before:items-center before:text-white before:opacity-0 before:transition-opacity before:content-['ON'] after:absolute after:right-[10px] after:top-0 after:flex after:h-full after:items-center after:text-tcb07-offink after:transition-opacity after:content-['OFF'] group-has-checked:before:opacity-100 group-has-checked:after:opacity-0 motion-reduce:transition-none">
        <span class="absolute left-[3px] top-[3px] size-6 transform-gpu rounded-full bg-white shadow-tcb07-thumb transition-transform duration-300 ease-[cubic-bezier(.4,.9,.3,1)] will-change-transform group-has-checked:translate-x-9 motion-reduce:transition-none"></span>
      </span>
    </label>
    <label class="group flex min-h-15 cursor-pointer items-center justify-between gap-4 rounded-xl border border-tcb07-line bg-white px-4.5 py-3.5 transition-colors duration-300 has-checked:border-tcb07-acc/40"><span class="text-[15px] font-semibold">Compact density</span>
      <input type="checkbox" class="peer sr-only">
      <span aria-hidden="true" class="relative h-[30px] w-[66px] flex-none overflow-hidden rounded-full bg-tcb07-off font-tcb07-mono text-[10px] font-bold tracking-[0.1em] transition-colors duration-300 peer-checked:bg-tcb07-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb07-acc before:absolute before:left-[11px] before:top-0 before:flex before:h-full before:items-center before:text-white before:opacity-0 before:transition-opacity before:content-['ON'] after:absolute after:right-[10px] after:top-0 after:flex after:h-full after:items-center after:text-tcb07-offink after:transition-opacity after:content-['OFF'] group-has-checked:before:opacity-100 group-has-checked:after:opacity-0 motion-reduce:transition-none">
        <span class="absolute left-[3px] top-[3px] size-6 transform-gpu rounded-full bg-white shadow-tcb07-thumb transition-transform duration-300 ease-[cubic-bezier(.4,.9,.3,1)] will-change-transform group-has-checked:translate-x-9 motion-reduce:transition-none"></span>
      </span>
    </label>
    <label class="group flex min-h-15 cursor-pointer items-center justify-between gap-4 rounded-xl border border-tcb07-line bg-white px-4.5 py-3.5 transition-colors duration-300 has-checked:border-tcb07-acc/40"><span class="text-[15px] font-semibold">Beta features</span>
      <input type="checkbox" class="peer sr-only">
      <span aria-hidden="true" class="relative h-[30px] w-[66px] flex-none overflow-hidden rounded-full bg-tcb07-off font-tcb07-mono text-[10px] font-bold tracking-[0.1em] transition-colors duration-300 peer-checked:bg-tcb07-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb07-acc before:absolute before:left-[11px] before:top-0 before:flex before:h-full before:items-center before:text-white before:opacity-0 before:transition-opacity before:content-['ON'] after:absolute after:right-[10px] after:top-0 after:flex after:h-full after:items-center after:text-tcb07-offink after:transition-opacity after:content-['OFF'] group-has-checked:before:opacity-100 group-has-checked:after:opacity-0 motion-reduce:transition-none">
        <span class="absolute left-[3px] top-[3px] size-6 transform-gpu rounded-full bg-white shadow-tcb07-thumb transition-transform duration-300 ease-[cubic-bezier(.4,.9,.3,1)] will-change-transform group-has-checked:translate-x-9 motion-reduce:transition-none"></span>
      </span>
    </label>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb07-bg: #eef2f3;
  --color-tcb07-bg: oklch(0.957 0.005 210);
  --color-tcb07-ink: #28323a;
  --color-tcb07-ink: oklch(0.3 0.02 230);
  --color-tcb07-line: #dde3e5;
  --color-tcb07-line: oklch(0.9 0.008 210);
  --color-tcb07-off: #cdd5d8;
  --color-tcb07-off: oklch(0.86 0.01 210);
  --color-tcb07-offink: #3f4c52;
  --color-tcb07-offink: oklch(0.41 0.02 220);
  --color-tcb07-acc: #137f8f;
  --color-tcb07-acc: oklch(0.54 0.1 205);
  --font-tcb07-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tcb07-mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-tcb07-thumb: 0 2px 6px rgb(20 30 40 / 0.4);
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tcb-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-tcb07-bg: #eef2f3;
  --color-tcb07-bg: oklch(0.957 0.005 210);
  --color-tcb07-ink: #28323a;
  --color-tcb07-ink: oklch(0.3 0.02 230);
  --color-tcb07-line: #dde3e5;
  --color-tcb07-line: oklch(0.9 0.008 210);
  --color-tcb07-off: #cdd5d8;
  --color-tcb07-off: oklch(0.86 0.01 210);
  --color-tcb07-offink: #3f4c52;
  --color-tcb07-offink: oklch(0.41 0.02 220);
  --color-tcb07-acc: #137f8f;
  --color-tcb07-acc: oklch(0.54 0.1 205);
  --font-tcb07-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tcb07-mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-tcb07-thumb: 0 2px 6px rgb(20 30 40 / 0.4);
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tcb-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=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap">

What changed in the port

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

  • .track::before{content:attr(data-on)} became before:content-['ON'] — the data-on/data-off attributes are no longer needed.
  • translate3d(calc(var(--w) - var(--h)),0,0) became transform-gpu group-has-checked:translate-x-9.
  • UI upgrade from the CSS original: the row card now carries state (accent-tinted border when on) and rows are 60px tall.
  • UI upgrade: the OFF label went from #5b6a70 on #c3ccd0 (3.2:1) to 4.8:1, and the ON label from white-on-oklch(0.58) (3.9:1) to 4.9:1 on the darker accent.
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 Slide Toggle with ON/OFF Labels — GPU translate3d
Source: https://codefronts.com/components/tailwind-css-checkboxes/tailwind-slide-toggle-on-off-labels/

A wider switch that prints ON and OFF inside its own track via before:content-['ON'] / after:content-['OFF'], cross-fading on group-has-checked:. The thumb glides on transform-gpu with will-change-transform, and each row card picks up an accent edge when on.
## HTML
```html
<section class="tcb-07 w-full min-h-svh grid place-items-center bg-tcb07-bg px-5 py-14 font-tcb07-sans text-tcb07-ink selection:bg-tcb07-acc selection:text-white" aria-label="Smooth slide toggles">
  <div class="flex w-full max-w-[25rem] flex-col gap-3.5">
    <label class="group flex min-h-15 cursor-pointer items-center justify-between gap-4 rounded-xl border border-tcb07-line bg-white px-4.5 py-3.5 transition-colors duration-300 has-checked:border-tcb07-acc/40"><span class="text-[15px] font-semibold">Auto-save drafts</span>
      <input type="checkbox" class="peer sr-only" checked>
      <span aria-hidden="true" class="relative h-[30px] w-[66px] flex-none overflow-hidden rounded-full bg-tcb07-off font-tcb07-mono text-[10px] font-bold tracking-[0.1em] transition-colors duration-300 peer-checked:bg-tcb07-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb07-acc before:absolute before:left-[11px] before:top-0 before:flex before:h-full before:items-center before:text-white before:opacity-0 before:transition-opacity before:content-['ON'] after:absolute after:right-[10px] after:top-0 after:flex after:h-full after:items-center after:text-tcb07-offink after:transition-opacity after:content-['OFF'] group-has-checked:before:opacity-100 group-has-checked:after:opacity-0 motion-reduce:transition-none">
        <span class="absolute left-[3px] top-[3px] size-6 transform-gpu rounded-full bg-white shadow-tcb07-thumb transition-transform duration-300 ease-[cubic-bezier(.4,.9,.3,1)] will-change-transform group-has-checked:translate-x-9 motion-reduce:transition-none"></span>
      </span>
    </label>
    <label class="group flex min-h-15 cursor-pointer items-center justify-between gap-4 rounded-xl border border-tcb07-line bg-white px-4.5 py-3.5 transition-colors duration-300 has-checked:border-tcb07-acc/40"><span class="text-[15px] font-semibold">Compact density</span>
      <input type="checkbox" class="peer sr-only">
      <span aria-hidden="true" class="relative h-[30px] w-[66px] flex-none overflow-hidden rounded-full bg-tcb07-off font-tcb07-mono text-[10px] font-bold tracking-[0.1em] transition-colors duration-300 peer-checked:bg-tcb07-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb07-acc before:absolute before:left-[11px] before:top-0 before:flex before:h-full before:items-center before:text-white before:opacity-0 before:transition-opacity before:content-['ON'] after:absolute after:right-[10px] after:top-0 after:flex after:h-full after:items-center after:text-tcb07-offink after:transition-opacity after:content-['OFF'] group-has-checked:before:opacity-100 group-has-checked:after:opacity-0 motion-reduce:transition-none">
        <span class="absolute left-[3px] top-[3px] size-6 transform-gpu rounded-full bg-white shadow-tcb07-thumb transition-transform duration-300 ease-[cubic-bezier(.4,.9,.3,1)] will-change-transform group-has-checked:translate-x-9 motion-reduce:transition-none"></span>
      </span>
    </label>
    <label class="group flex min-h-15 cursor-pointer items-center justify-between gap-4 rounded-xl border border-tcb07-line bg-white px-4.5 py-3.5 transition-colors duration-300 has-checked:border-tcb07-acc/40"><span class="text-[15px] font-semibold">Beta features</span>
      <input type="checkbox" class="peer sr-only">
      <span aria-hidden="true" class="relative h-[30px] w-[66px] flex-none overflow-hidden rounded-full bg-tcb07-off font-tcb07-mono text-[10px] font-bold tracking-[0.1em] transition-colors duration-300 peer-checked:bg-tcb07-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb07-acc before:absolute before:left-[11px] before:top-0 before:flex before:h-full before:items-center before:text-white before:opacity-0 before:transition-opacity before:content-['ON'] after:absolute after:right-[10px] after:top-0 after:flex after:h-full after:items-center after:text-tcb07-offink after:transition-opacity after:content-['OFF'] group-has-checked:before:opacity-100 group-has-checked:after:opacity-0 motion-reduce:transition-none">
        <span class="absolute left-[3px] top-[3px] size-6 transform-gpu rounded-full bg-white shadow-tcb07-thumb transition-transform duration-300 ease-[cubic-bezier(.4,.9,.3,1)] will-change-transform group-has-checked:translate-x-9 motion-reduce:transition-none"></span>
      </span>
    </label>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb07-bg: #eef2f3;
  --color-tcb07-bg: oklch(0.957 0.005 210);
  --color-tcb07-ink: #28323a;
  --color-tcb07-ink: oklch(0.3 0.02 230);
  --color-tcb07-line: #dde3e5;
  --color-tcb07-line: oklch(0.9 0.008 210);
  --color-tcb07-off: #cdd5d8;
  --color-tcb07-off: oklch(0.86 0.01 210);
  --color-tcb07-offink: #3f4c52;
  --color-tcb07-offink: oklch(0.41 0.02 220);
  --color-tcb07-acc: #137f8f;
  --color-tcb07-acc: oklch(0.54 0.1 205);
  --font-tcb07-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tcb07-mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-tcb07-thumb: 0 2px 6px rgb(20 30 40 / 0.4);
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

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

How this works

The text is decoration. Generated content isn't reliably announced, which is what we want: the checkbox already reports its state, so ON/OFF is visual reinforcement only.

GPU hint. transform-gpu forces a 3D translate, promoting the thumb to its own layer — the Tailwind equivalent of the original's translate3d(…,0,0).

Travel. 66px track − 24px thumb − 2×3px inset = 36px = translate-x-9.

Make it yours

  • I/O glyphs: before:content-['I'] after:content-['O'] for a hardware look.
  • Localise: swap the arbitrary content strings (keep them short — the track is 66px).
  • Accent: --color-tcb07-acc drives the track, ring and row edge.
  • Remove the row card for inline use: keep only the label's flex utilities.

Gotchas — read before shipping

  • Spaces inside content-['…'] must be written as underscores: content-['ON_AIR'].
  • Don't rely on the ON/OFF text for meaning — colour-blind users still need the thumb position.
  • will-change costs memory; keep it on small elements only.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Generated content and 3D transforms are universal.

Techniques used in this demo

Utilitiesfirst-class utility or variant

pseudo elementstw ↗content propertytw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →