29 Tailwind CSS Checkboxes
01 / 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 CSS Toggle Switch — iOS-Style SaaS Settings

The settings-page classic in utilities: a pill track and a gliding thumb, driven by a peer checkbox that stays in the tab order via sr-only. The track paints with peer-checked:bg-tcb01-acc; the thumb, nested one level deeper, moves with group-has-checked:translate-x-5.

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-01 w-full min-h-svh grid place-items-center bg-tcb01-bg px-5 py-14 font-tcb01-sans text-tcb01-ink selection:bg-tcb01-acc selection:text-white" aria-label="SaaS dashboard toggle switches">
  <div class="w-full max-w-[26rem] overflow-hidden rounded-2xl border border-tcb01-line bg-white shadow-tcb01-panel">
    <header class="border-b border-tcb01-line px-5.5 py-4">
      <h2 class="text-[15px] font-bold tracking-[-0.01em]">Notifications</h2>
      <p class="mt-0.5 text-[13px] text-tcb01-mut">Choose what lands in your inbox.</p>
    </header>
    <div class="divide-y divide-tcb01-line">
      <label class="group flex min-h-16 cursor-pointer items-center justify-between gap-4 px-5.5 py-4 transition-colors hover:bg-tcb01-hover">
        <span><span class="block text-[15px] font-semibold">Email notifications</span><span class="mt-0.5 block text-[13px] text-tcb01-mut">Product news &amp; weekly digest</span></span>
        <input type="checkbox" class="peer sr-only" checked>
        <span aria-hidden="true" class="relative h-[26px] w-[46px] flex-none rounded-full bg-tcb01-off transition-colors duration-300 peer-checked:bg-tcb01-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb01-acc motion-reduce:transition-none">
          <span class="absolute left-[3px] top-[3px] size-5 rounded-full bg-white shadow-tcb01-thumb transition-transform duration-300 ease-[cubic-bezier(.2,.8,.2,1)] group-has-checked:translate-x-5 motion-reduce:transition-none"></span>
        </span>
      </label>
      <label class="group flex min-h-16 cursor-pointer items-center justify-between gap-4 px-5.5 py-4 transition-colors hover:bg-tcb01-hover">
        <span><span class="block text-[15px] font-semibold">Two-factor auth</span><span class="mt-0.5 block text-[13px] text-tcb01-mut">Require a code at sign-in</span></span>
        <input type="checkbox" class="peer sr-only">
        <span aria-hidden="true" class="relative h-[26px] w-[46px] flex-none rounded-full bg-tcb01-off transition-colors duration-300 peer-checked:bg-tcb01-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb01-acc motion-reduce:transition-none">
          <span class="absolute left-[3px] top-[3px] size-5 rounded-full bg-white shadow-tcb01-thumb transition-transform duration-300 ease-[cubic-bezier(.2,.8,.2,1)] group-has-checked:translate-x-5 motion-reduce:transition-none"></span>
        </span>
      </label>
      <label class="group flex min-h-16 cursor-pointer items-center justify-between gap-4 px-5.5 py-4 transition-colors hover:bg-tcb01-hover">
        <span><span class="block text-[15px] font-semibold">Usage analytics</span><span class="mt-0.5 block text-[13px] text-tcb01-mut">Share anonymised metrics</span></span>
        <input type="checkbox" class="peer sr-only" checked>
        <span aria-hidden="true" class="relative h-[26px] w-[46px] flex-none rounded-full bg-tcb01-off transition-colors duration-300 peer-checked:bg-tcb01-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb01-acc motion-reduce:transition-none">
          <span class="absolute left-[3px] top-[3px] size-5 rounded-full bg-white shadow-tcb01-thumb transition-transform duration-300 ease-[cubic-bezier(.2,.8,.2,1)] group-has-checked:translate-x-5 motion-reduce:transition-none"></span>
        </span>
      </label>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb01-bg: #f4f5f7;
  --color-tcb01-bg: oklch(0.97 0.004 260);
  --color-tcb01-ink: #1f2430;
  --color-tcb01-ink: oklch(0.25 0.02 265);
  --color-tcb01-mut: #5d6472;
  --color-tcb01-mut: oklch(0.49 0.02 265);
  --color-tcb01-line: #eceef2;
  --color-tcb01-line: oklch(0.945 0.006 265);
  --color-tcb01-hover: #f8f9fb;
  --color-tcb01-hover: oklch(0.982 0.003 265);
  --color-tcb01-off: #cfd4dc;
  --color-tcb01-off: oklch(0.86 0.012 265);
  --color-tcb01-acc: #2f7de1;
  --color-tcb01-acc: oklch(0.6 0.17 255);
  --font-tcb01-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --shadow-tcb01-panel: 0 18px 40px -28px rgb(16 24 40 / 0.5);
  --shadow-tcb01-thumb: 0 2px 5px rgb(16 24 40 / 0.35);
}
/* 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-01 {
  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-tcb01-bg: #f4f5f7;
  --color-tcb01-bg: oklch(0.97 0.004 260);
  --color-tcb01-ink: #1f2430;
  --color-tcb01-ink: oklch(0.25 0.02 265);
  --color-tcb01-mut: #5d6472;
  --color-tcb01-mut: oklch(0.49 0.02 265);
  --color-tcb01-line: #eceef2;
  --color-tcb01-line: oklch(0.945 0.006 265);
  --color-tcb01-hover: #f8f9fb;
  --color-tcb01-hover: oklch(0.982 0.003 265);
  --color-tcb01-off: #cfd4dc;
  --color-tcb01-off: oklch(0.86 0.012 265);
  --color-tcb01-acc: #2f7de1;
  --color-tcb01-acc: oklch(0.6 0.17 255);
  --font-tcb01-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --shadow-tcb01-panel: 0 18px 40px -28px rgb(16 24 40 / 0.5);
  --shadow-tcb01-thumb: 0 2px 5px rgb(16 24 40 / 0.35);
}
/* 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-01 {
  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.

  • The .cb-01__input sr-only block became sr-only; input:checked ~ .track became peer-checked:, and input:checked ~ .track .thumb became group-has-checked: on the thumb.
  • transform: translateX(calc(var(--w) - var(--h))) resolved to the fixed translate-x-5 — the maths is done once, in review, not in every frame.
  • UI upgrade from the CSS original: the panel gained a header that names the group, rows now tint on hover, and rows are 64px tall.
  • UI upgrade: muted sub-copy went from #8a909c (3.3:1) to oklch(0.49) (6.1:1 on white).
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 CSS Toggle Switch — iOS-Style SaaS Settings
Source: https://codefronts.com/components/tailwind-css-checkboxes/tailwind-toggle-switch-ios-saas-settings/

The settings-page classic in utilities: a pill track and a gliding thumb, driven by a peer checkbox that stays in the tab order via sr-only. The track paints with peer-checked:bg-tcb01-acc; the thumb, nested one level deeper, moves with group-has-checked:translate-x-5.
## HTML
```html
<section class="tcb-01 w-full min-h-svh grid place-items-center bg-tcb01-bg px-5 py-14 font-tcb01-sans text-tcb01-ink selection:bg-tcb01-acc selection:text-white" aria-label="SaaS dashboard toggle switches">
  <div class="w-full max-w-[26rem] overflow-hidden rounded-2xl border border-tcb01-line bg-white shadow-tcb01-panel">
    <header class="border-b border-tcb01-line px-5.5 py-4">
      <h2 class="text-[15px] font-bold tracking-[-0.01em]">Notifications</h2>
      <p class="mt-0.5 text-[13px] text-tcb01-mut">Choose what lands in your inbox.</p>
    </header>
    <div class="divide-y divide-tcb01-line">
      <label class="group flex min-h-16 cursor-pointer items-center justify-between gap-4 px-5.5 py-4 transition-colors hover:bg-tcb01-hover">
        <span><span class="block text-[15px] font-semibold">Email notifications</span><span class="mt-0.5 block text-[13px] text-tcb01-mut">Product news &amp; weekly digest</span></span>
        <input type="checkbox" class="peer sr-only" checked>
        <span aria-hidden="true" class="relative h-[26px] w-[46px] flex-none rounded-full bg-tcb01-off transition-colors duration-300 peer-checked:bg-tcb01-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb01-acc motion-reduce:transition-none">
          <span class="absolute left-[3px] top-[3px] size-5 rounded-full bg-white shadow-tcb01-thumb transition-transform duration-300 ease-[cubic-bezier(.2,.8,.2,1)] group-has-checked:translate-x-5 motion-reduce:transition-none"></span>
        </span>
      </label>
      <label class="group flex min-h-16 cursor-pointer items-center justify-between gap-4 px-5.5 py-4 transition-colors hover:bg-tcb01-hover">
        <span><span class="block text-[15px] font-semibold">Two-factor auth</span><span class="mt-0.5 block text-[13px] text-tcb01-mut">Require a code at sign-in</span></span>
        <input type="checkbox" class="peer sr-only">
        <span aria-hidden="true" class="relative h-[26px] w-[46px] flex-none rounded-full bg-tcb01-off transition-colors duration-300 peer-checked:bg-tcb01-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb01-acc motion-reduce:transition-none">
          <span class="absolute left-[3px] top-[3px] size-5 rounded-full bg-white shadow-tcb01-thumb transition-transform duration-300 ease-[cubic-bezier(.2,.8,.2,1)] group-has-checked:translate-x-5 motion-reduce:transition-none"></span>
        </span>
      </label>
      <label class="group flex min-h-16 cursor-pointer items-center justify-between gap-4 px-5.5 py-4 transition-colors hover:bg-tcb01-hover">
        <span><span class="block text-[15px] font-semibold">Usage analytics</span><span class="mt-0.5 block text-[13px] text-tcb01-mut">Share anonymised metrics</span></span>
        <input type="checkbox" class="peer sr-only" checked>
        <span aria-hidden="true" class="relative h-[26px] w-[46px] flex-none rounded-full bg-tcb01-off transition-colors duration-300 peer-checked:bg-tcb01-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb01-acc motion-reduce:transition-none">
          <span class="absolute left-[3px] top-[3px] size-5 rounded-full bg-white shadow-tcb01-thumb transition-transform duration-300 ease-[cubic-bezier(.2,.8,.2,1)] group-has-checked:translate-x-5 motion-reduce:transition-none"></span>
        </span>
      </label>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb01-bg: #f4f5f7;
  --color-tcb01-bg: oklch(0.97 0.004 260);
  --color-tcb01-ink: #1f2430;
  --color-tcb01-ink: oklch(0.25 0.02 265);
  --color-tcb01-mut: #5d6472;
  --color-tcb01-mut: oklch(0.49 0.02 265);
  --color-tcb01-line: #eceef2;
  --color-tcb01-line: oklch(0.945 0.006 265);
  --color-tcb01-hover: #f8f9fb;
  --color-tcb01-hover: oklch(0.982 0.003 265);
  --color-tcb01-off: #cfd4dc;
  --color-tcb01-off: oklch(0.86 0.012 265);
  --color-tcb01-acc: #2f7de1;
  --color-tcb01-acc: oklch(0.6 0.17 255);
  --font-tcb01-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --shadow-tcb01-panel: 0 18px 40px -28px rgb(16 24 40 / 0.5);
  --shadow-tcb01-thumb: 0 2px 5px rgb(16 24 40 / 0.35);
}
/* 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-01 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Two state channels. peer-checked: only reaches siblings after the input, so it styles the track. The thumb lives inside the track, so it reads state from the label instead: group on the <label>, group-has-checked:translate-x-5 on the thumb.

The maths is a utility. A 46px track, 20px thumb and 3px inset leave exactly 20px of travel — translate-x-5. Transform-only motion stays on the compositor.

The row is the target. The whole <label> toggles, with min-h-16 rows far above the 44px touch floor.

Make it yours

  • Re-theme: edit --color-tcb01-acc — track fill and focus ring follow.
  • Bigger switch: h-8 w-14 track + size-6 thumb + group-has-checked:translate-x-6.
  • Right-to-left: add rtl:group-has-checked:-translate-x-5.
  • Disabled row: has-disabled:opacity-60 has-disabled:cursor-not-allowed on the label.

Gotchas — read before shipping

  • peer must come before the elements that use peer-* — CSS sibling combinators only look forward.
  • Don't swap sr-only for hidden: display:none removes the input from the tab order.
  • If you need a real switch role for AT, add role="switch" to the input; it still reports checked.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() (for group-has-checked:) needs Chrome 105 / Safari 15.4 / Firefox 121 — inside Tailwind v4's own floor.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →