29 Tailwind CSS Checkboxes
05 / 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
Tailwind + JSMIT licensed

Tailwind Indeterminate Checkbox — Select All with Tri-State

The "select all" pattern with a real mixed state: peer-indeterminate:bg-tcb05-acc fills the master box and group-has-indeterminate:opacity-100 reveals its dash. A 20-line controller syncs parent and children — and now announces "2 of 4 selected" through a polite live region.

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-05 w-full min-h-svh grid place-items-center bg-tcb05-bg px-5 py-14 font-tcb05-sans text-tcb05-ink selection:bg-tcb05-acc selection:text-white" data-tcb05 aria-label="Select all with indeterminate state">
  <div class="w-full max-w-[26rem] rounded-2xl border border-tcb05-line bg-white p-2 shadow-tcb05-panel">
    <div class="flex items-center justify-between gap-3 border-b border-tcb05-line px-3.5 pb-2.5 pt-1.5">
      <label class="group flex min-h-11 cursor-pointer items-center gap-3 text-[15px] font-semibold">
        <input type="checkbox" class="peer sr-only" data-master>
        <span aria-hidden="true" class="relative grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb05-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb05-acc peer-checked:bg-tcb05-acc peer-indeterminate:border-tcb05-acc peer-indeterminate:bg-tcb05-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb05-acc motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="absolute size-3.5 opacity-0 transition-opacity group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="absolute size-3.5 opacity-0 transition-opacity group-has-indeterminate:opacity-100"><path d="M6 12h12"/></svg></span>
        Select all recipients
      </label>
      <span class="text-[13px] font-medium tabular-nums text-tcb05-mut" aria-live="polite" data-count></span>
    </div>
    <div class="pl-5 pt-1">
      <label class="group flex min-h-11 cursor-pointer items-center gap-3 rounded-lg px-3.5 text-sm transition-colors hover:bg-tcb05-hover has-checked:bg-tcb05-sel"><input type="checkbox" class="peer sr-only" data-child checked><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb05-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb05-acc peer-checked:bg-tcb05-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb05-acc motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5 opacity-0 transition-opacity group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span>alex@acme.io</label>
      <label class="group flex min-h-11 cursor-pointer items-center gap-3 rounded-lg px-3.5 text-sm transition-colors hover:bg-tcb05-hover has-checked:bg-tcb05-sel"><input type="checkbox" class="peer sr-only" data-child><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb05-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb05-acc peer-checked:bg-tcb05-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb05-acc motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5 opacity-0 transition-opacity group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span>sam@acme.io</label>
      <label class="group flex min-h-11 cursor-pointer items-center gap-3 rounded-lg px-3.5 text-sm transition-colors hover:bg-tcb05-hover has-checked:bg-tcb05-sel"><input type="checkbox" class="peer sr-only" data-child checked><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb05-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb05-acc peer-checked:bg-tcb05-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb05-acc motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5 opacity-0 transition-opacity group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span>jordan@acme.io</label>
      <label class="group flex min-h-11 cursor-pointer items-center gap-3 rounded-lg px-3.5 text-sm transition-colors hover:bg-tcb05-hover has-checked:bg-tcb05-sel"><input type="checkbox" class="peer sr-only" data-child><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb05-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb05-acc peer-checked:bg-tcb05-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb05-acc motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5 opacity-0 transition-opacity group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span>taylor@acme.io</label>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb05-bg: #f4f5f7;
  --color-tcb05-bg: oklch(0.97 0.004 260);
  --color-tcb05-ink: #2a2f3a;
  --color-tcb05-ink: oklch(0.3 0.02 265);
  --color-tcb05-mut: #5d6472;
  --color-tcb05-mut: oklch(0.49 0.02 265);
  --color-tcb05-line: #eceef2;
  --color-tcb05-line: oklch(0.945 0.006 265);
  --color-tcb05-hover: #f6f7f9;
  --color-tcb05-hover: oklch(0.975 0.003 265);
  --color-tcb05-sel: #eef4fd;
  --color-tcb05-sel: oklch(0.965 0.015 255);
  --color-tcb05-box: #b9bfc9;
  --color-tcb05-box: oklch(0.8 0.015 265);
  --color-tcb05-acc: #2f7de1;
  --color-tcb05-acc: oklch(0.6 0.17 255);
  --font-tcb05-sans: 'Geist', system-ui, sans-serif;
  --shadow-tcb05-panel: 0 18px 40px -30px rgb(16 24 40 / 0.5);
}
/* 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-05 {
  width: 100%;
  min-height: 100svh;
}
(() => {
  document.querySelectorAll('[data-tcb05]').forEach((root) => {
    if (root.dataset.wired) return;
    root.dataset.wired = '1';
    const master = root.querySelector('[data-master]');
    const kids = [...root.querySelectorAll('[data-child]')];
    const count = root.querySelector('[data-count]');
    const sync = () => {
      const n = kids.filter((k) => k.checked).length;
      master.checked = n === kids.length;
      master.indeterminate = n > 0 && n < kids.length;
      count.textContent = n + ' of ' + kids.length + ' selected';
    };
    master.addEventListener('change', () => {
      kids.forEach((k) => { k.checked = master.checked; });
      sync();
    });
    kids.forEach((k) => k.addEventListener('change', sync));
    sync();
  });
})();

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-tcb05-bg: #f4f5f7;
  --color-tcb05-bg: oklch(0.97 0.004 260);
  --color-tcb05-ink: #2a2f3a;
  --color-tcb05-ink: oklch(0.3 0.02 265);
  --color-tcb05-mut: #5d6472;
  --color-tcb05-mut: oklch(0.49 0.02 265);
  --color-tcb05-line: #eceef2;
  --color-tcb05-line: oklch(0.945 0.006 265);
  --color-tcb05-hover: #f6f7f9;
  --color-tcb05-hover: oklch(0.975 0.003 265);
  --color-tcb05-sel: #eef4fd;
  --color-tcb05-sel: oklch(0.965 0.015 255);
  --color-tcb05-box: #b9bfc9;
  --color-tcb05-box: oklch(0.8 0.015 265);
  --color-tcb05-acc: #2f7de1;
  --color-tcb05-acc: oklch(0.6 0.17 255);
  --font-tcb05-sans: 'Geist', system-ui, sans-serif;
  --shadow-tcb05-panel: 0 18px 40px -30px rgb(16 24 40 / 0.5);
}
/* 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-05 {
  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=Geist:wght@400;500;600;700&display=swap">

What changed in the port

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

  • input:indeterminate ~ .box became peer-indeterminate:, and the two ::before/::after mask glyphs became two inline SVGs toggled by group-has-checked: / group-has-indeterminate:.
  • The script now finds its root with data-tcb05 instead of an id, so several instances can share a page.
  • UI upgrade from the CSS original: a live "2 of 4 selected" count, selected rows tint, and every row is 44px tall.
  • UI upgrade: removed the invalid aria-checked="mixed" on the native input — screen readers now get the mixed state from .indeterminate, as the spec intends.
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 Indeterminate Checkbox — Select All with Tri-State
Source: https://codefronts.com/components/tailwind-css-checkboxes/tailwind-indeterminate-checkbox-select-all/

The "select all" pattern with a real mixed state: peer-indeterminate:bg-tcb05-acc fills the master box and group-has-indeterminate:opacity-100 reveals its dash. A 20-line controller syncs parent and children — and now announces "2 of 4 selected" through a polite live region.
## HTML
```html
<section class="tcb-05 w-full min-h-svh grid place-items-center bg-tcb05-bg px-5 py-14 font-tcb05-sans text-tcb05-ink selection:bg-tcb05-acc selection:text-white" data-tcb05 aria-label="Select all with indeterminate state">
  <div class="w-full max-w-[26rem] rounded-2xl border border-tcb05-line bg-white p-2 shadow-tcb05-panel">
    <div class="flex items-center justify-between gap-3 border-b border-tcb05-line px-3.5 pb-2.5 pt-1.5">
      <label class="group flex min-h-11 cursor-pointer items-center gap-3 text-[15px] font-semibold">
        <input type="checkbox" class="peer sr-only" data-master>
        <span aria-hidden="true" class="relative grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb05-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb05-acc peer-checked:bg-tcb05-acc peer-indeterminate:border-tcb05-acc peer-indeterminate:bg-tcb05-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb05-acc motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="absolute size-3.5 opacity-0 transition-opacity group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="absolute size-3.5 opacity-0 transition-opacity group-has-indeterminate:opacity-100"><path d="M6 12h12"/></svg></span>
        Select all recipients
      </label>
      <span class="text-[13px] font-medium tabular-nums text-tcb05-mut" aria-live="polite" data-count></span>
    </div>
    <div class="pl-5 pt-1">
      <label class="group flex min-h-11 cursor-pointer items-center gap-3 rounded-lg px-3.5 text-sm transition-colors hover:bg-tcb05-hover has-checked:bg-tcb05-sel"><input type="checkbox" class="peer sr-only" data-child checked><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb05-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb05-acc peer-checked:bg-tcb05-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb05-acc motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5 opacity-0 transition-opacity group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span>alex@acme.io</label>
      <label class="group flex min-h-11 cursor-pointer items-center gap-3 rounded-lg px-3.5 text-sm transition-colors hover:bg-tcb05-hover has-checked:bg-tcb05-sel"><input type="checkbox" class="peer sr-only" data-child><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb05-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb05-acc peer-checked:bg-tcb05-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb05-acc motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5 opacity-0 transition-opacity group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span>sam@acme.io</label>
      <label class="group flex min-h-11 cursor-pointer items-center gap-3 rounded-lg px-3.5 text-sm transition-colors hover:bg-tcb05-hover has-checked:bg-tcb05-sel"><input type="checkbox" class="peer sr-only" data-child checked><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb05-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb05-acc peer-checked:bg-tcb05-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb05-acc motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5 opacity-0 transition-opacity group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span>jordan@acme.io</label>
      <label class="group flex min-h-11 cursor-pointer items-center gap-3 rounded-lg px-3.5 text-sm transition-colors hover:bg-tcb05-hover has-checked:bg-tcb05-sel"><input type="checkbox" class="peer sr-only" data-child><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb05-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb05-acc peer-checked:bg-tcb05-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb05-acc motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5 opacity-0 transition-opacity group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span>taylor@acme.io</label>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb05-bg: #f4f5f7;
  --color-tcb05-bg: oklch(0.97 0.004 260);
  --color-tcb05-ink: #2a2f3a;
  --color-tcb05-ink: oklch(0.3 0.02 265);
  --color-tcb05-mut: #5d6472;
  --color-tcb05-mut: oklch(0.49 0.02 265);
  --color-tcb05-line: #eceef2;
  --color-tcb05-line: oklch(0.945 0.006 265);
  --color-tcb05-hover: #f6f7f9;
  --color-tcb05-hover: oklch(0.975 0.003 265);
  --color-tcb05-sel: #eef4fd;
  --color-tcb05-sel: oklch(0.965 0.015 255);
  --color-tcb05-box: #b9bfc9;
  --color-tcb05-box: oklch(0.8 0.015 265);
  --color-tcb05-acc: #2f7de1;
  --color-tcb05-acc: oklch(0.6 0.17 255);
  --font-tcb05-sans: 'Geist', system-ui, sans-serif;
  --shadow-tcb05-panel: 0 18px 40px -30px rgb(16 24 40 / 0.5);
}
/* 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-05 {
  width: 100%;
  min-height: 100svh;
}
```

## JavaScript
```js
(() => {
  document.querySelectorAll('[data-tcb05]').forEach((root) => {
    if (root.dataset.wired) return;
    root.dataset.wired = '1';
    const master = root.querySelector('[data-master]');
    const kids = [...root.querySelectorAll('[data-child]')];
    const count = root.querySelector('[data-count]');
    const sync = () => {
      const n = kids.filter((k) => k.checked).length;
      master.checked = n === kids.length;
      master.indeterminate = n > 0 && n < kids.length;
      count.textContent = n + ' of ' + kids.length + ' selected';
    };
    master.addEventListener('change', () => {
      kids.forEach((k) => { k.checked = master.checked; });
      sync();
    });
    kids.forEach((k) => k.addEventListener('change', sync));
    sync();
  });
})();
```

How this works

Indeterminate is a property, not an attribute. HTML can't declare it; the script sets master.indeterminate whenever some — but not all — children are on. Tailwind's indeterminate: variant then does the painting.

Native semantics. The original also set aria-checked="mixed" on the native input, which is invalid ARIA on a checkbox that already exposes the state. It's gone: browsers report the mixed state from the property.

Count as feedback. The header's "2 of 4 selected" is written by sync() into an aria-live region.

Make it yours

  • Re-theme with --color-tcb05-acc; the dash and tick stay white.
  • Nested trees: run the same sync one level up for grandparent checkboxes.
  • Bulk-action bar: toggle a toolbar with group-has-[[data-child]:checked]/card:flex.
  • Reduce the list indent (pl-5) on mobile.

Gotchas — read before shipping

  • Clicking an indeterminate checkbox makes it checked — the controller then checks every child, matching Gmail/Drive behaviour.
  • Never set aria-checked on a native checkbox; set .indeterminate instead.
  • The script is idempotent (data-wired), so re-running it in a playground won't double-bind.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:indeterminate is universal; :has() (for the glyph variant) needs Firefox 121+.

Techniques used in this demo

HTML & JSno Tailwind involved

aria liveMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →