29 Tailwind CSS Checkboxes
02 / 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 Filter Chip Checkbox — Style Checkbox as Button

The e-commerce facet bar in a single class list per chip: has-checked:bg-tcb02-acc repaints the whole <label>, a leading tick unfolds, and a pure-CSS counter tallies the active filters live — has-checked:[counter-increment:tcb02] plus after:content-[counter(tcb02)]. Zero JavaScript.

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-02 w-full min-h-svh grid place-items-center bg-tcb02-bg px-5 py-14 font-tcb02-sans text-tcb02-ink selection:bg-tcb02-acc selection:text-white" aria-label="Filter tag pills">
  <fieldset class="flex w-full max-w-[30rem] flex-wrap gap-2.5 [counter-reset:tcb02]">
    <legend class="mb-3.5 text-xs font-bold uppercase tracking-[0.12em] text-tcb02-mut">Filter by category</legend>
    <label class="group inline-flex min-h-11 cursor-pointer select-none items-center rounded-full border-[1.5px] border-tcb02-line bg-white px-4 text-sm font-semibold transition-colors duration-200 hover:border-tcb02-acc has-checked:border-tcb02-acc has-checked:bg-tcb02-acc has-checked:text-white has-checked:[counter-increment:tcb02] has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb02-acc motion-reduce:transition-none"><input type="checkbox" class="sr-only" checked><span aria-hidden="true" class="inline-flex w-0 scale-50 overflow-hidden opacity-0 transition-all duration-200 group-has-checked:mr-1.5 group-has-checked:w-3.5 group-has-checked:scale-100 group-has-checked:opacity-100 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 flex-none"><path d="M20 6 9 17l-5-5"/></svg></span>Design</label>
    <label class="group inline-flex min-h-11 cursor-pointer select-none items-center rounded-full border-[1.5px] border-tcb02-line bg-white px-4 text-sm font-semibold transition-colors duration-200 hover:border-tcb02-acc has-checked:border-tcb02-acc has-checked:bg-tcb02-acc has-checked:text-white has-checked:[counter-increment:tcb02] has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb02-acc motion-reduce:transition-none"><input type="checkbox" class="sr-only"><span aria-hidden="true" class="inline-flex w-0 scale-50 overflow-hidden opacity-0 transition-all duration-200 group-has-checked:mr-1.5 group-has-checked:w-3.5 group-has-checked:scale-100 group-has-checked:opacity-100 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 flex-none"><path d="M20 6 9 17l-5-5"/></svg></span>Engineering</label>
    <label class="group inline-flex min-h-11 cursor-pointer select-none items-center rounded-full border-[1.5px] border-tcb02-line bg-white px-4 text-sm font-semibold transition-colors duration-200 hover:border-tcb02-acc has-checked:border-tcb02-acc has-checked:bg-tcb02-acc has-checked:text-white has-checked:[counter-increment:tcb02] has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb02-acc motion-reduce:transition-none"><input type="checkbox" class="sr-only" checked><span aria-hidden="true" class="inline-flex w-0 scale-50 overflow-hidden opacity-0 transition-all duration-200 group-has-checked:mr-1.5 group-has-checked:w-3.5 group-has-checked:scale-100 group-has-checked:opacity-100 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 flex-none"><path d="M20 6 9 17l-5-5"/></svg></span>Marketing</label>
    <label class="group inline-flex min-h-11 cursor-pointer select-none items-center rounded-full border-[1.5px] border-tcb02-line bg-white px-4 text-sm font-semibold transition-colors duration-200 hover:border-tcb02-acc has-checked:border-tcb02-acc has-checked:bg-tcb02-acc has-checked:text-white has-checked:[counter-increment:tcb02] has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb02-acc motion-reduce:transition-none"><input type="checkbox" class="sr-only"><span aria-hidden="true" class="inline-flex w-0 scale-50 overflow-hidden opacity-0 transition-all duration-200 group-has-checked:mr-1.5 group-has-checked:w-3.5 group-has-checked:scale-100 group-has-checked:opacity-100 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 flex-none"><path d="M20 6 9 17l-5-5"/></svg></span>Remote</label>
    <label class="group inline-flex min-h-11 cursor-pointer select-none items-center rounded-full border-[1.5px] border-tcb02-line bg-white px-4 text-sm font-semibold transition-colors duration-200 hover:border-tcb02-acc has-checked:border-tcb02-acc has-checked:bg-tcb02-acc has-checked:text-white has-checked:[counter-increment:tcb02] has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb02-acc motion-reduce:transition-none"><input type="checkbox" class="sr-only"><span aria-hidden="true" class="inline-flex w-0 scale-50 overflow-hidden opacity-0 transition-all duration-200 group-has-checked:mr-1.5 group-has-checked:w-3.5 group-has-checked:scale-100 group-has-checked:opacity-100 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 flex-none"><path d="M20 6 9 17l-5-5"/></svg></span>Full-time</label>
    <label class="group inline-flex min-h-11 cursor-pointer select-none items-center rounded-full border-[1.5px] border-tcb02-line bg-white px-4 text-sm font-semibold transition-colors duration-200 hover:border-tcb02-acc has-checked:border-tcb02-acc has-checked:bg-tcb02-acc has-checked:text-white has-checked:[counter-increment:tcb02] has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb02-acc motion-reduce:transition-none"><input type="checkbox" class="sr-only" checked><span aria-hidden="true" class="inline-flex w-0 scale-50 overflow-hidden opacity-0 transition-all duration-200 group-has-checked:mr-1.5 group-has-checked:w-3.5 group-has-checked:scale-100 group-has-checked:opacity-100 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 flex-none"><path d="M20 6 9 17l-5-5"/></svg></span>Contract</label>
    <p aria-hidden="true" class="mt-3 flex basis-full items-center gap-2 text-[13px] font-semibold text-tcb02-mut after:grid after:h-6 after:min-w-6 after:place-items-center after:rounded-full after:bg-tcb02-ink after:px-2 after:text-xs after:text-white after:content-[counter(tcb02)]">Active filters</p>
  </fieldset>
</section>
@import "tailwindcss";

@theme {
  --color-tcb02-bg: #f4f6f5;
  --color-tcb02-bg: oklch(0.97 0.004 160);
  --color-tcb02-ink: #2f3538;
  --color-tcb02-ink: oklch(0.32 0.01 220);
  --color-tcb02-mut: #5f6763;
  --color-tcb02-mut: oklch(0.5 0.01 160);
  --color-tcb02-line: #d6dcd9;
  --color-tcb02-line: oklch(0.89 0.008 160);
  --color-tcb02-acc: #1f7a57;
  --color-tcb02-acc: oklch(0.5 0.11 160);
  --font-tcb02-sans: 'Manrope', 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-02 {
  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-tcb02-bg: #f4f6f5;
  --color-tcb02-bg: oklch(0.97 0.004 160);
  --color-tcb02-ink: #2f3538;
  --color-tcb02-ink: oklch(0.32 0.01 220);
  --color-tcb02-mut: #5f6763;
  --color-tcb02-mut: oklch(0.5 0.01 160);
  --color-tcb02-line: #d6dcd9;
  --color-tcb02-line: oklch(0.89 0.008 160);
  --color-tcb02-acc: #1f7a57;
  --color-tcb02-acc: oklch(0.5 0.11 160);
  --font-tcb02-sans: 'Manrope', 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-02 {
  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=Manrope:wght@400;500;600;700;800&display=swap">

What changed in the port

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

  • .cb-02__pill:has(:checked) became has-checked: on the label, and the separate :has(:focus-visible) rule became has-focus-visible:.
  • The CSS mask-image check (a 400-character data URI, declared twice with -webkit-) became a 1-line inline SVG that inherits currentColor.
  • UI upgrade from the CSS original: a live, zero-JS "Active filters" tally built from CSS counters, so users see the effect of each chip.
  • UI upgrade: the accent darkened from oklch(0.55) to 0.5 so white chip text passes 4.5:1, the legend rose to 5.8:1, and every chip is 44px tall (was ~38px).
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 Filter Chip Checkbox — Style Checkbox as Button
Source: https://codefronts.com/components/tailwind-css-checkboxes/tailwind-filter-chip-checkbox-button/

The e-commerce facet bar in a single class list per chip: has-checked:bg-tcb02-acc repaints the whole <label>, a leading tick unfolds, and a pure-CSS counter tallies the active filters live — has-checked:[counter-increment:tcb02] plus after:content-[counter(tcb02)]. Zero JavaScript.
## HTML
```html
<section class="tcb-02 w-full min-h-svh grid place-items-center bg-tcb02-bg px-5 py-14 font-tcb02-sans text-tcb02-ink selection:bg-tcb02-acc selection:text-white" aria-label="Filter tag pills">
  <fieldset class="flex w-full max-w-[30rem] flex-wrap gap-2.5 [counter-reset:tcb02]">
    <legend class="mb-3.5 text-xs font-bold uppercase tracking-[0.12em] text-tcb02-mut">Filter by category</legend>
    <label class="group inline-flex min-h-11 cursor-pointer select-none items-center rounded-full border-[1.5px] border-tcb02-line bg-white px-4 text-sm font-semibold transition-colors duration-200 hover:border-tcb02-acc has-checked:border-tcb02-acc has-checked:bg-tcb02-acc has-checked:text-white has-checked:[counter-increment:tcb02] has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb02-acc motion-reduce:transition-none"><input type="checkbox" class="sr-only" checked><span aria-hidden="true" class="inline-flex w-0 scale-50 overflow-hidden opacity-0 transition-all duration-200 group-has-checked:mr-1.5 group-has-checked:w-3.5 group-has-checked:scale-100 group-has-checked:opacity-100 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 flex-none"><path d="M20 6 9 17l-5-5"/></svg></span>Design</label>
    <label class="group inline-flex min-h-11 cursor-pointer select-none items-center rounded-full border-[1.5px] border-tcb02-line bg-white px-4 text-sm font-semibold transition-colors duration-200 hover:border-tcb02-acc has-checked:border-tcb02-acc has-checked:bg-tcb02-acc has-checked:text-white has-checked:[counter-increment:tcb02] has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb02-acc motion-reduce:transition-none"><input type="checkbox" class="sr-only"><span aria-hidden="true" class="inline-flex w-0 scale-50 overflow-hidden opacity-0 transition-all duration-200 group-has-checked:mr-1.5 group-has-checked:w-3.5 group-has-checked:scale-100 group-has-checked:opacity-100 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 flex-none"><path d="M20 6 9 17l-5-5"/></svg></span>Engineering</label>
    <label class="group inline-flex min-h-11 cursor-pointer select-none items-center rounded-full border-[1.5px] border-tcb02-line bg-white px-4 text-sm font-semibold transition-colors duration-200 hover:border-tcb02-acc has-checked:border-tcb02-acc has-checked:bg-tcb02-acc has-checked:text-white has-checked:[counter-increment:tcb02] has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb02-acc motion-reduce:transition-none"><input type="checkbox" class="sr-only" checked><span aria-hidden="true" class="inline-flex w-0 scale-50 overflow-hidden opacity-0 transition-all duration-200 group-has-checked:mr-1.5 group-has-checked:w-3.5 group-has-checked:scale-100 group-has-checked:opacity-100 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 flex-none"><path d="M20 6 9 17l-5-5"/></svg></span>Marketing</label>
    <label class="group inline-flex min-h-11 cursor-pointer select-none items-center rounded-full border-[1.5px] border-tcb02-line bg-white px-4 text-sm font-semibold transition-colors duration-200 hover:border-tcb02-acc has-checked:border-tcb02-acc has-checked:bg-tcb02-acc has-checked:text-white has-checked:[counter-increment:tcb02] has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb02-acc motion-reduce:transition-none"><input type="checkbox" class="sr-only"><span aria-hidden="true" class="inline-flex w-0 scale-50 overflow-hidden opacity-0 transition-all duration-200 group-has-checked:mr-1.5 group-has-checked:w-3.5 group-has-checked:scale-100 group-has-checked:opacity-100 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 flex-none"><path d="M20 6 9 17l-5-5"/></svg></span>Remote</label>
    <label class="group inline-flex min-h-11 cursor-pointer select-none items-center rounded-full border-[1.5px] border-tcb02-line bg-white px-4 text-sm font-semibold transition-colors duration-200 hover:border-tcb02-acc has-checked:border-tcb02-acc has-checked:bg-tcb02-acc has-checked:text-white has-checked:[counter-increment:tcb02] has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb02-acc motion-reduce:transition-none"><input type="checkbox" class="sr-only"><span aria-hidden="true" class="inline-flex w-0 scale-50 overflow-hidden opacity-0 transition-all duration-200 group-has-checked:mr-1.5 group-has-checked:w-3.5 group-has-checked:scale-100 group-has-checked:opacity-100 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 flex-none"><path d="M20 6 9 17l-5-5"/></svg></span>Full-time</label>
    <label class="group inline-flex min-h-11 cursor-pointer select-none items-center rounded-full border-[1.5px] border-tcb02-line bg-white px-4 text-sm font-semibold transition-colors duration-200 hover:border-tcb02-acc has-checked:border-tcb02-acc has-checked:bg-tcb02-acc has-checked:text-white has-checked:[counter-increment:tcb02] has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb02-acc motion-reduce:transition-none"><input type="checkbox" class="sr-only" checked><span aria-hidden="true" class="inline-flex w-0 scale-50 overflow-hidden opacity-0 transition-all duration-200 group-has-checked:mr-1.5 group-has-checked:w-3.5 group-has-checked:scale-100 group-has-checked:opacity-100 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 flex-none"><path d="M20 6 9 17l-5-5"/></svg></span>Contract</label>
    <p aria-hidden="true" class="mt-3 flex basis-full items-center gap-2 text-[13px] font-semibold text-tcb02-mut after:grid after:h-6 after:min-w-6 after:place-items-center after:rounded-full after:bg-tcb02-ink after:px-2 after:text-xs after:text-white after:content-[counter(tcb02)]">Active filters</p>
  </fieldset>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb02-bg: #f4f6f5;
  --color-tcb02-bg: oklch(0.97 0.004 160);
  --color-tcb02-ink: #2f3538;
  --color-tcb02-ink: oklch(0.32 0.01 220);
  --color-tcb02-mut: #5f6763;
  --color-tcb02-mut: oklch(0.5 0.01 160);
  --color-tcb02-line: #d6dcd9;
  --color-tcb02-line: oklch(0.89 0.008 160);
  --color-tcb02-acc: #1f7a57;
  --color-tcb02-acc: oklch(0.5 0.11 160);
  --font-tcb02-sans: 'Manrope', 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-02 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The label is the control. Each chip wraps a sr-only checkbox, so the state lives on the parent and has-checked: can repaint border, fill and ink together.

The counter is CSS. The fieldset resets tcb02; every checked chip increments it; a footer after the chips prints counter(tcb02) through after:content-[…]. Counters only count elements before the reader in document order, which is why the tally sits below the chips.

The tick unfolds from w-0 to w-3.5 with scale and opacity, so unselected chips carry no dead space.

Make it yours

  • Per-category colour: give a chip has-checked:bg-emerald-600 to override the token.
  • Remove affordance: swap the tick for an ✕ glyph and move it after the text.
  • Density: min-h-9 px-3 text-[13px] for toolbars (keep the 44px target on touch with pointer-coarse:min-h-11).
  • Hide the tally at zero: wrap it in a group-has-checked/field: reveal.

Gotchas — read before shipping

  • Generated counter text isn't reliably announced — the tally is aria-hidden; the checkboxes themselves carry the state.
  • Underscores inside arbitrary values become spaces; counter(tcb02) needs none.
  • Animating width is a small reflow; for dense toolbars keep the tick in layout and only fade it.

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

:has()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →