29 Tailwind CSS Checkboxes
04 / 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

Pure Tailwind CSS Accordion with Checkbox — No JavaScript

A smooth-height FAQ accordion with zero script: each panel animates grid-rows-[0fr] → peer-checked:grid-rows-[1fr], the only reliable way to transition to auto height. The chevron chip flips and fills from group-has-checked:.

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-04 w-full min-h-svh grid place-items-center bg-tcb04-bg px-5 py-14 font-tcb04-sans text-tcb04-ink selection:bg-tcb04-acc selection:text-white" aria-label="Frequently asked questions">
  <div class="w-full max-w-[35rem]">
    <h2 class="mb-5 text-[26px] font-bold tracking-[-0.02em]">Questions, answered</h2>
    <div class="divide-y divide-tcb04-line overflow-hidden rounded-2xl border border-tcb04-line bg-white shadow-tcb04-panel">
      <div class="group">
        <input type="checkbox" class="peer sr-only" id="tcb04-1" checked>
        <label for="tcb04-1" class="flex min-h-15 cursor-pointer items-center justify-between gap-4 px-5.5 py-4 text-[15px] font-semibold transition-colors hover:bg-tcb04-hover peer-focus-visible:outline-3 peer-focus-visible:-outline-offset-3 peer-focus-visible:outline-tcb04-acc">What browsers are supported?
          <span aria-hidden="true" class="grid size-8 flex-none place-items-center rounded-full bg-tcb04-chip text-tcb04-mut transition-colors duration-300 group-has-checked:bg-tcb04-acc group-has-checked:text-white"><span class="size-2.5 -translate-y-0.5 rotate-45 border-r-[2.5px] border-b-[2.5px] border-current transition-transform duration-300 group-has-checked:translate-y-0.5 group-has-checked:rotate-[-135deg] motion-reduce:transition-none"></span></span>
        </label>
        <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-350 ease-out peer-checked:grid-rows-[1fr] motion-reduce:transition-none">
          <div class="min-h-0 overflow-hidden"><p class="px-5.5 pb-5 text-[14px] leading-relaxed text-tcb04-mut">Every evergreen browser — Chrome, Edge, Safari and Firefox. The grid-row reveal degrades to an instant open in legacy engines.</p></div>
        </div>
      </div>
      <div class="group">
        <input type="checkbox" class="peer sr-only" id="tcb04-2">
        <label for="tcb04-2" class="flex min-h-15 cursor-pointer items-center justify-between gap-4 px-5.5 py-4 text-[15px] font-semibold transition-colors hover:bg-tcb04-hover peer-focus-visible:outline-3 peer-focus-visible:-outline-offset-3 peer-focus-visible:outline-tcb04-acc">Is there any JavaScript?
          <span aria-hidden="true" class="grid size-8 flex-none place-items-center rounded-full bg-tcb04-chip text-tcb04-mut transition-colors duration-300 group-has-checked:bg-tcb04-acc group-has-checked:text-white"><span class="size-2.5 -translate-y-0.5 rotate-45 border-r-[2.5px] border-b-[2.5px] border-current transition-transform duration-300 group-has-checked:translate-y-0.5 group-has-checked:rotate-[-135deg] motion-reduce:transition-none"></span></span>
        </label>
        <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-350 ease-out peer-checked:grid-rows-[1fr] motion-reduce:transition-none">
          <div class="min-h-0 overflow-hidden"><p class="px-5.5 pb-5 text-[14px] leading-relaxed text-tcb04-mut">None. The open/close state is the checkbox itself, and the height animation is pure CSS via grid-template-rows.</p></div>
        </div>
      </div>
      <div class="group">
        <input type="checkbox" class="peer sr-only" id="tcb04-3">
        <label for="tcb04-3" class="flex min-h-15 cursor-pointer items-center justify-between gap-4 px-5.5 py-4 text-[15px] font-semibold transition-colors hover:bg-tcb04-hover peer-focus-visible:outline-3 peer-focus-visible:-outline-offset-3 peer-focus-visible:outline-tcb04-acc">Can multiple panels stay open?
          <span aria-hidden="true" class="grid size-8 flex-none place-items-center rounded-full bg-tcb04-chip text-tcb04-mut transition-colors duration-300 group-has-checked:bg-tcb04-acc group-has-checked:text-white"><span class="size-2.5 -translate-y-0.5 rotate-45 border-r-[2.5px] border-b-[2.5px] border-current transition-transform duration-300 group-has-checked:translate-y-0.5 group-has-checked:rotate-[-135deg] motion-reduce:transition-none"></span></span>
        </label>
        <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-350 ease-out peer-checked:grid-rows-[1fr] motion-reduce:transition-none">
          <div class="min-h-0 overflow-hidden"><p class="px-5.5 pb-5 text-[14px] leading-relaxed text-tcb04-mut">Yes — these are independent checkboxes. Swap them for radios with a shared name to force a single-open accordion.</p></div>
        </div>
      </div>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb04-bg: #f4f5f7;
  --color-tcb04-bg: oklch(0.97 0.004 260);
  --color-tcb04-ink: #1f2430;
  --color-tcb04-ink: oklch(0.25 0.02 265);
  --color-tcb04-mut: #555c69;
  --color-tcb04-mut: oklch(0.46 0.02 265);
  --color-tcb04-line: #eceef2;
  --color-tcb04-line: oklch(0.945 0.006 265);
  --color-tcb04-hover: #f8f9fb;
  --color-tcb04-hover: oklch(0.982 0.003 265);
  --color-tcb04-chip: #f0f2f5;
  --color-tcb04-chip: oklch(0.96 0.005 265);
  --color-tcb04-acc: #2f7de1;
  --color-tcb04-acc: oklch(0.6 0.17 255);
  --font-tcb04-sans: 'DM Sans', system-ui, sans-serif;
  --shadow-tcb04-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-04 {
  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-tcb04-bg: #f4f5f7;
  --color-tcb04-bg: oklch(0.97 0.004 260);
  --color-tcb04-ink: #1f2430;
  --color-tcb04-ink: oklch(0.25 0.02 265);
  --color-tcb04-mut: #555c69;
  --color-tcb04-mut: oklch(0.46 0.02 265);
  --color-tcb04-line: #eceef2;
  --color-tcb04-line: oklch(0.945 0.006 265);
  --color-tcb04-hover: #f8f9fb;
  --color-tcb04-hover: oklch(0.982 0.003 265);
  --color-tcb04-chip: #f0f2f5;
  --color-tcb04-chip: oklch(0.96 0.005 265);
  --color-tcb04-acc: #2f7de1;
  --color-tcb04-acc: oklch(0.6 0.17 255);
  --font-tcb04-sans: 'DM Sans', system-ui, sans-serif;
  --shadow-tcb04-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-04 {
  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=DM+Sans:opsz,wght@9..40,400..700&display=swap">

What changed in the port

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

  • input:checked ~ .panel{grid-template-rows:1fr} became peer-checked:grid-rows-[1fr]; the chevron's descendant rule became group-has-checked:.
  • The separate padding-bottom toggle was removed — padding now sits inside the clipped child, so height and spacing animate as one.
  • UI upgrade from the CSS original: the chevron lives in a 32px chip that fills with the accent when open, rows tint on hover, and the list has a heading.
  • UI upgrade: answer copy rose from #6b7280 (4.8:1) to oklch(0.46) (7:1), and the inner div gained the missing min-h-0 that Safari needs to fully collapse.
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: Pure Tailwind CSS Accordion with Checkbox — No JavaScript
Source: https://codefronts.com/components/tailwind-css-checkboxes/pure-tailwind-accordion-checkbox-no-javascript/

A smooth-height FAQ accordion with zero script: each panel animates grid-rows-[0fr] → peer-checked:grid-rows-[1fr], the only reliable way to transition to auto height. The chevron chip flips and fills from group-has-checked:.
## HTML
```html
<section class="tcb-04 w-full min-h-svh grid place-items-center bg-tcb04-bg px-5 py-14 font-tcb04-sans text-tcb04-ink selection:bg-tcb04-acc selection:text-white" aria-label="Frequently asked questions">
  <div class="w-full max-w-[35rem]">
    <h2 class="mb-5 text-[26px] font-bold tracking-[-0.02em]">Questions, answered</h2>
    <div class="divide-y divide-tcb04-line overflow-hidden rounded-2xl border border-tcb04-line bg-white shadow-tcb04-panel">
      <div class="group">
        <input type="checkbox" class="peer sr-only" id="tcb04-1" checked>
        <label for="tcb04-1" class="flex min-h-15 cursor-pointer items-center justify-between gap-4 px-5.5 py-4 text-[15px] font-semibold transition-colors hover:bg-tcb04-hover peer-focus-visible:outline-3 peer-focus-visible:-outline-offset-3 peer-focus-visible:outline-tcb04-acc">What browsers are supported?
          <span aria-hidden="true" class="grid size-8 flex-none place-items-center rounded-full bg-tcb04-chip text-tcb04-mut transition-colors duration-300 group-has-checked:bg-tcb04-acc group-has-checked:text-white"><span class="size-2.5 -translate-y-0.5 rotate-45 border-r-[2.5px] border-b-[2.5px] border-current transition-transform duration-300 group-has-checked:translate-y-0.5 group-has-checked:rotate-[-135deg] motion-reduce:transition-none"></span></span>
        </label>
        <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-350 ease-out peer-checked:grid-rows-[1fr] motion-reduce:transition-none">
          <div class="min-h-0 overflow-hidden"><p class="px-5.5 pb-5 text-[14px] leading-relaxed text-tcb04-mut">Every evergreen browser — Chrome, Edge, Safari and Firefox. The grid-row reveal degrades to an instant open in legacy engines.</p></div>
        </div>
      </div>
      <div class="group">
        <input type="checkbox" class="peer sr-only" id="tcb04-2">
        <label for="tcb04-2" class="flex min-h-15 cursor-pointer items-center justify-between gap-4 px-5.5 py-4 text-[15px] font-semibold transition-colors hover:bg-tcb04-hover peer-focus-visible:outline-3 peer-focus-visible:-outline-offset-3 peer-focus-visible:outline-tcb04-acc">Is there any JavaScript?
          <span aria-hidden="true" class="grid size-8 flex-none place-items-center rounded-full bg-tcb04-chip text-tcb04-mut transition-colors duration-300 group-has-checked:bg-tcb04-acc group-has-checked:text-white"><span class="size-2.5 -translate-y-0.5 rotate-45 border-r-[2.5px] border-b-[2.5px] border-current transition-transform duration-300 group-has-checked:translate-y-0.5 group-has-checked:rotate-[-135deg] motion-reduce:transition-none"></span></span>
        </label>
        <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-350 ease-out peer-checked:grid-rows-[1fr] motion-reduce:transition-none">
          <div class="min-h-0 overflow-hidden"><p class="px-5.5 pb-5 text-[14px] leading-relaxed text-tcb04-mut">None. The open/close state is the checkbox itself, and the height animation is pure CSS via grid-template-rows.</p></div>
        </div>
      </div>
      <div class="group">
        <input type="checkbox" class="peer sr-only" id="tcb04-3">
        <label for="tcb04-3" class="flex min-h-15 cursor-pointer items-center justify-between gap-4 px-5.5 py-4 text-[15px] font-semibold transition-colors hover:bg-tcb04-hover peer-focus-visible:outline-3 peer-focus-visible:-outline-offset-3 peer-focus-visible:outline-tcb04-acc">Can multiple panels stay open?
          <span aria-hidden="true" class="grid size-8 flex-none place-items-center rounded-full bg-tcb04-chip text-tcb04-mut transition-colors duration-300 group-has-checked:bg-tcb04-acc group-has-checked:text-white"><span class="size-2.5 -translate-y-0.5 rotate-45 border-r-[2.5px] border-b-[2.5px] border-current transition-transform duration-300 group-has-checked:translate-y-0.5 group-has-checked:rotate-[-135deg] motion-reduce:transition-none"></span></span>
        </label>
        <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-350 ease-out peer-checked:grid-rows-[1fr] motion-reduce:transition-none">
          <div class="min-h-0 overflow-hidden"><p class="px-5.5 pb-5 text-[14px] leading-relaxed text-tcb04-mut">Yes — these are independent checkboxes. Swap them for radios with a shared name to force a single-open accordion.</p></div>
        </div>
      </div>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb04-bg: #f4f5f7;
  --color-tcb04-bg: oklch(0.97 0.004 260);
  --color-tcb04-ink: #1f2430;
  --color-tcb04-ink: oklch(0.25 0.02 265);
  --color-tcb04-mut: #555c69;
  --color-tcb04-mut: oklch(0.46 0.02 265);
  --color-tcb04-line: #eceef2;
  --color-tcb04-line: oklch(0.945 0.006 265);
  --color-tcb04-hover: #f8f9fb;
  --color-tcb04-hover: oklch(0.982 0.003 265);
  --color-tcb04-chip: #f0f2f5;
  --color-tcb04-chip: oklch(0.96 0.005 265);
  --color-tcb04-acc: #2f7de1;
  --color-tcb04-acc: oklch(0.6 0.17 255);
  --font-tcb04-sans: 'DM Sans', system-ui, sans-serif;
  --shadow-tcb04-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-04 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Why grid rows. height: auto can't be transitioned, but a one-row grid can go from 0fr to 1fr. The panel's only child needs min-h-0 overflow-hidden or it refuses to shrink.

Padding lives inside the clip. The original animated padding-bottom separately; here the padding sits on an inner <p>, so one transition moves everything.

Independent panels. These are checkboxes, so several can stay open; give them radios with one name for single-open behaviour.

Make it yours

  • Single-open: type="radio" name="tcb04" on every input.
  • Speed: duration-350 on the panel; pair with ease-[cubic-bezier(.3,.9,.3,1)] for a softer land.
  • Plus/minus icon: replace the chevron with two bars and group-has-checked:rotate-90 on one.
  • Semantic alternative: for FAQs that must be findable with Ctrl+F while closed, see the <details> accordion in the blockquote set (demo 24).

Gotchas — read before shipping

  • Closed panel text is still in the DOM and read by screen readers in browse mode; for strict hiding add group-not-has-checked:invisible with a delay.
  • Ids must be unique per page — they're namespaced tcb04-1…3.
  • The ring is inset (-outline-offset-3) because the list clips its children with overflow-hidden.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Animated grid-template-rows lands in Chrome 107, Safari 16 and Firefox 66; older engines open instantly.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →