29 Tailwind CSS Checkboxes
20 / 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 To-Do List Checkbox with Animated Strikethrough

The to-do list done properly: ticking a task draws a strike across its label with after:scale-x-0 → group-has-checked:after:scale-x-100, and a zero-JS header counter reports "2 of 4 done" using CSS counters. Done items stay readable at 4.6:1 instead of fading to 2.3:1.

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-20 w-full min-h-svh grid place-items-center bg-tcb20-bg px-5 py-14 font-tcb20-sans text-tcb20-ink selection:bg-tcb20-acc selection:text-white" aria-label="To-do list with strikethrough">
  <div class="w-full max-w-[26rem] rounded-2xl border border-tcb20-line bg-white px-4 pb-3 pt-4 [counter-reset:tcb20]">
    <h2 class="px-2 pb-1 text-lg font-bold tracking-[-0.01em]">Launch week</h2>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 px-2 has-checked:[counter-increment:tcb20]"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb20-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb20-acc peer-checked:bg-tcb20-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb20-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 scale-50 opacity-0 transition duration-200 group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="relative text-[15px] transition-colors duration-300 after:absolute after:left-0 after:top-[52%] after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-350 after:ease-[cubic-bezier(.5,.1,.2,1)] after:content-[''] group-has-checked:text-tcb20-done group-has-checked:after:scale-x-100 motion-reduce:after:transition-none">Write the launch email</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 px-2 has-checked:[counter-increment:tcb20]"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb20-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb20-acc peer-checked:bg-tcb20-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb20-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 scale-50 opacity-0 transition duration-200 group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="relative text-[15px] transition-colors duration-300 after:absolute after:left-0 after:top-[52%] after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-350 after:ease-[cubic-bezier(.5,.1,.2,1)] after:content-[''] group-has-checked:text-tcb20-done group-has-checked:after:scale-x-100 motion-reduce:after:transition-none">Review pull requests</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 px-2 has-checked:[counter-increment:tcb20]"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb20-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb20-acc peer-checked:bg-tcb20-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb20-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 scale-50 opacity-0 transition duration-200 group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="relative text-[15px] transition-colors duration-300 after:absolute after:left-0 after:top-[52%] after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-350 after:ease-[cubic-bezier(.5,.1,.2,1)] after:content-[''] group-has-checked:text-tcb20-done group-has-checked:after:scale-x-100 motion-reduce:after:transition-none">Book the venue</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 px-2 has-checked:[counter-increment:tcb20]"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb20-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb20-acc peer-checked:bg-tcb20-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb20-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 scale-50 opacity-0 transition duration-200 group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="relative text-[15px] transition-colors duration-300 after:absolute after:left-0 after:top-[52%] after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-350 after:ease-[cubic-bezier(.5,.1,.2,1)] after:content-[''] group-has-checked:text-tcb20-done group-has-checked:after:scale-x-100 motion-reduce:after:transition-none">Update the changelog</span></label>
    <p aria-hidden="true" class="mt-2 border-t border-tcb20-line px-2 pt-3 text-[13px] font-semibold text-tcb20-mut before:text-tcb20-acc before:content-[counter(tcb20)]"> of 4 done</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb20-bg: #f3f6f4;
  --color-tcb20-bg: oklch(0.97 0.005 155);
  --color-tcb20-ink: #2c3a33;
  --color-tcb20-ink: oklch(0.33 0.02 160);
  --color-tcb20-mut: #5b675f;
  --color-tcb20-mut: oklch(0.49 0.015 155);
  --color-tcb20-done: #62786c;
  --color-tcb20-done: oklch(0.54 0.03 160);
  --color-tcb20-line: #e1e8e3;
  --color-tcb20-line: oklch(0.92 0.008 155);
  --color-tcb20-box: #9aaca1;
  --color-tcb20-box: oklch(0.72 0.02 155);
  --color-tcb20-acc: #1f8a4c;
  --color-tcb20-acc: oklch(0.55 0.14 152);
  --font-tcb20-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* 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-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-tcb20-bg: #f3f6f4;
  --color-tcb20-bg: oklch(0.97 0.005 155);
  --color-tcb20-ink: #2c3a33;
  --color-tcb20-ink: oklch(0.33 0.02 160);
  --color-tcb20-mut: #5b675f;
  --color-tcb20-mut: oklch(0.49 0.015 155);
  --color-tcb20-done: #62786c;
  --color-tcb20-done: oklch(0.54 0.03 160);
  --color-tcb20-line: #e1e8e3;
  --color-tcb20-line: oklch(0.92 0.008 155);
  --color-tcb20-box: #9aaca1;
  --color-tcb20-box: oklch(0.72 0.02 155);
  --color-tcb20-acc: #1f8a4c;
  --color-tcb20-acc: oklch(0.55 0.14 152);
  --font-tcb20-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* 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-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.

  • .label::after{transform:scaleX(0);transform-origin:left} became after:scale-x-0 after:origin-left; the checked rule became group-has-checked:after:scale-x-100.
  • The label-colour rule input:checked ~ .label became group-has-checked: so it no longer depends on sibling order.
  • UI upgrade from the CSS original: a list title and a zero-JS "2 of 4 done" counter give the list a sense of progress.
  • UI upgrade: done text rose from #9bb0a4 (2.3:1 — illegible) to oklch(0.54) (4.6:1), and the empty box border from 1.6:1 to 3:1.
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 To-Do List Checkbox with Animated Strikethrough
Source: https://codefronts.com/components/tailwind-css-checkboxes/tailwind-todo-list-checkbox-strikethrough/

The to-do list done properly: ticking a task draws a strike across its label with after:scale-x-0 → group-has-checked:after:scale-x-100, and a zero-JS header counter reports "2 of 4 done" using CSS counters. Done items stay readable at 4.6:1 instead of fading to 2.3:1.
## HTML
```html
<section class="tcb-20 w-full min-h-svh grid place-items-center bg-tcb20-bg px-5 py-14 font-tcb20-sans text-tcb20-ink selection:bg-tcb20-acc selection:text-white" aria-label="To-do list with strikethrough">
  <div class="w-full max-w-[26rem] rounded-2xl border border-tcb20-line bg-white px-4 pb-3 pt-4 [counter-reset:tcb20]">
    <h2 class="px-2 pb-1 text-lg font-bold tracking-[-0.01em]">Launch week</h2>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 px-2 has-checked:[counter-increment:tcb20]"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb20-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb20-acc peer-checked:bg-tcb20-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb20-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 scale-50 opacity-0 transition duration-200 group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="relative text-[15px] transition-colors duration-300 after:absolute after:left-0 after:top-[52%] after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-350 after:ease-[cubic-bezier(.5,.1,.2,1)] after:content-[''] group-has-checked:text-tcb20-done group-has-checked:after:scale-x-100 motion-reduce:after:transition-none">Write the launch email</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 px-2 has-checked:[counter-increment:tcb20]"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb20-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb20-acc peer-checked:bg-tcb20-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb20-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 scale-50 opacity-0 transition duration-200 group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="relative text-[15px] transition-colors duration-300 after:absolute after:left-0 after:top-[52%] after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-350 after:ease-[cubic-bezier(.5,.1,.2,1)] after:content-[''] group-has-checked:text-tcb20-done group-has-checked:after:scale-x-100 motion-reduce:after:transition-none">Review pull requests</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 px-2 has-checked:[counter-increment:tcb20]"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb20-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb20-acc peer-checked:bg-tcb20-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb20-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 scale-50 opacity-0 transition duration-200 group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="relative text-[15px] transition-colors duration-300 after:absolute after:left-0 after:top-[52%] after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-350 after:ease-[cubic-bezier(.5,.1,.2,1)] after:content-[''] group-has-checked:text-tcb20-done group-has-checked:after:scale-x-100 motion-reduce:after:transition-none">Book the venue</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 px-2 has-checked:[counter-increment:tcb20]"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb20-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb20-acc peer-checked:bg-tcb20-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb20-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 scale-50 opacity-0 transition duration-200 group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="relative text-[15px] transition-colors duration-300 after:absolute after:left-0 after:top-[52%] after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-350 after:ease-[cubic-bezier(.5,.1,.2,1)] after:content-[''] group-has-checked:text-tcb20-done group-has-checked:after:scale-x-100 motion-reduce:after:transition-none">Update the changelog</span></label>
    <p aria-hidden="true" class="mt-2 border-t border-tcb20-line px-2 pt-3 text-[13px] font-semibold text-tcb20-mut before:text-tcb20-acc before:content-[counter(tcb20)]"> of 4 done</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb20-bg: #f3f6f4;
  --color-tcb20-bg: oklch(0.97 0.005 155);
  --color-tcb20-ink: #2c3a33;
  --color-tcb20-ink: oklch(0.33 0.02 160);
  --color-tcb20-mut: #5b675f;
  --color-tcb20-mut: oklch(0.49 0.015 155);
  --color-tcb20-done: #62786c;
  --color-tcb20-done: oklch(0.54 0.03 160);
  --color-tcb20-line: #e1e8e3;
  --color-tcb20-line: oklch(0.92 0.008 155);
  --color-tcb20-box: #9aaca1;
  --color-tcb20-box: oklch(0.72 0.02 155);
  --color-tcb20-acc: #1f8a4c;
  --color-tcb20-acc: oklch(0.55 0.14 152);
  --font-tcb20-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* 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-20 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Transform, not text-decoration. line-through can't animate; a 2px after: bar scaled on X can, and it stays on the compositor.

Counting done items. The list resets a counter; each checked row increments it; a footer after the list prints it. It's aria-hidden — screen readers get state from the checkboxes.

Make it yours

  • Wavy strike: replace the bar with after:bg-[url(…wave.svg)].
  • Hide done: has-checked:hidden on the row (with care — it removes focus).
  • Priority dots: add a coloured size-2 rounded-full before the label.
  • Colour: --color-tcb20-acc.

Gotchas — read before shipping

  • The strike bar measures the label's box — keep labels on one line or apply per line with box-decoration-clone and a gradient.
  • Screen readers don't announce CSS counters; don't rely on the tally for AT users.
  • Counters count in document order, so the tally must come after the list.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

CSS counters are universal; :has() needs Firefox 121+.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transform origintw ↗pseudo elementstw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →