29 Tailwind CSS Checkboxes
03 / 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 Pricing Plan Card Select — Checkbox-Style Selectable Cards

Selectable pricing cards that lift, outline and badge themselves on selection — all from has-checked: on the card label. Because plans are mutually exclusive, the port quietly swaps the original checkboxes for a named radio group: same look, correct semantics, arrow-key navigation for free.

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-03 w-full min-h-svh grid place-items-center bg-tcb03-bg px-5 py-14 font-tcb03-sans text-tcb03-ink selection:bg-tcb03-acc selection:text-white" aria-label="Pricing plan selector">
  <fieldset class="w-full max-w-3xl">
    <legend class="mb-6 w-full text-center text-2xl font-extrabold tracking-[-0.02em]">Pick your plan</legend>
    <div class="grid gap-4 sm:grid-cols-3">
      <label class="group relative flex cursor-pointer flex-col gap-1.5 rounded-2xl border-2 border-tcb03-line bg-white px-5 py-5.5 shadow-tcb03-rest transition duration-300 ease-[cubic-bezier(.2,.8,.2,1)] hover:border-tcb03-hover has-checked:-translate-y-1 has-checked:border-tcb03-acc has-checked:shadow-tcb03-lift has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb03-acc motion-reduce:transition-none motion-reduce:has-checked:translate-y-0"><input type="radio" name="tcb03-plan" class="peer sr-only">
        <span aria-hidden="true" class="absolute right-3.5 top-3.5 grid size-[22px] place-items-center rounded-full border-2 border-tcb03-line bg-white text-white transition-colors duration-200 peer-checked:border-tcb03-acc peer-checked:bg-tcb03-acc"><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 scale-40 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="text-[13px] font-bold uppercase tracking-[0.06em] text-tcb03-mut">Starter</span>
        <span class="text-[32px] font-extrabold tabular-nums tracking-[-0.02em]">$9<span class="text-sm font-semibold text-tcb03-mut">/mo</span></span>
        <span class="mt-0.5 text-[13px] leading-normal text-tcb03-mut">3 projects · 1 seat · community support</span>
      </label>
      <label class="group relative flex cursor-pointer flex-col gap-1.5 rounded-2xl border-2 border-tcb03-line bg-white px-5 py-5.5 shadow-tcb03-rest transition duration-300 ease-[cubic-bezier(.2,.8,.2,1)] hover:border-tcb03-hover has-checked:-translate-y-1 has-checked:border-tcb03-acc has-checked:shadow-tcb03-lift has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb03-acc motion-reduce:transition-none motion-reduce:has-checked:translate-y-0"><input type="radio" name="tcb03-plan" class="peer sr-only" checked>
        <span aria-hidden="true" class="absolute right-3.5 top-3.5 grid size-[22px] place-items-center rounded-full border-2 border-tcb03-line bg-white text-white transition-colors duration-200 peer-checked:border-tcb03-acc peer-checked:bg-tcb03-acc"><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 scale-40 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="absolute -top-2.5 left-5 rounded-full bg-tcb03-acc px-2.5 py-0.5 text-[10.5px] font-bold uppercase tracking-[0.1em] text-white">Popular</span>
        <span class="text-[13px] font-bold uppercase tracking-[0.06em] text-tcb03-mut">Growth</span>
        <span class="text-[32px] font-extrabold tabular-nums tracking-[-0.02em]">$29<span class="text-sm font-semibold text-tcb03-mut">/mo</span></span>
        <span class="mt-0.5 text-[13px] leading-normal text-tcb03-mut">Unlimited projects · 5 seats · priority support</span>
      </label>
      <label class="group relative flex cursor-pointer flex-col gap-1.5 rounded-2xl border-2 border-tcb03-line bg-white px-5 py-5.5 shadow-tcb03-rest transition duration-300 ease-[cubic-bezier(.2,.8,.2,1)] hover:border-tcb03-hover has-checked:-translate-y-1 has-checked:border-tcb03-acc has-checked:shadow-tcb03-lift has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb03-acc motion-reduce:transition-none motion-reduce:has-checked:translate-y-0"><input type="radio" name="tcb03-plan" class="peer sr-only">
        <span aria-hidden="true" class="absolute right-3.5 top-3.5 grid size-[22px] place-items-center rounded-full border-2 border-tcb03-line bg-white text-white transition-colors duration-200 peer-checked:border-tcb03-acc peer-checked:bg-tcb03-acc"><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 scale-40 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="text-[13px] font-bold uppercase tracking-[0.06em] text-tcb03-mut">Scale</span>
        <span class="text-[32px] font-extrabold tabular-nums tracking-[-0.02em]">$79<span class="text-sm font-semibold text-tcb03-mut">/mo</span></span>
        <span class="mt-0.5 text-[13px] leading-normal text-tcb03-mut">SSO · audit logs · dedicated CSM</span>
      </label>
    </div>
  </fieldset>
</section>
@import "tailwindcss";

@theme {
  --color-tcb03-bg: #f5f4f8;
  --color-tcb03-bg: oklch(0.97 0.006 295);
  --color-tcb03-ink: #22203a;
  --color-tcb03-ink: oklch(0.25 0.04 290);
  --color-tcb03-mut: #625f78;
  --color-tcb03-mut: oklch(0.5 0.03 290);
  --color-tcb03-line: #e5e4ee;
  --color-tcb03-line: oklch(0.92 0.01 290);
  --color-tcb03-hover: #c7c4dd;
  --color-tcb03-hover: oklch(0.83 0.03 290);
  --color-tcb03-acc: #6a3fd6;
  --color-tcb03-acc: oklch(0.52 0.2 288);
  --font-tcb03-sans: 'Bricolage Grotesque', system-ui, sans-serif;
  --shadow-tcb03-rest: 0 10px 26px -22px rgb(30 20 60 / 0.6);
  --shadow-tcb03-lift: 0 22px 40px -24px rgb(80 40 180 / 0.55);
}
/* 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-03 {
  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-tcb03-bg: #f5f4f8;
  --color-tcb03-bg: oklch(0.97 0.006 295);
  --color-tcb03-ink: #22203a;
  --color-tcb03-ink: oklch(0.25 0.04 290);
  --color-tcb03-mut: #625f78;
  --color-tcb03-mut: oklch(0.5 0.03 290);
  --color-tcb03-line: #e5e4ee;
  --color-tcb03-line: oklch(0.92 0.01 290);
  --color-tcb03-hover: #c7c4dd;
  --color-tcb03-hover: oklch(0.83 0.03 290);
  --color-tcb03-acc: #6a3fd6;
  --color-tcb03-acc: oklch(0.52 0.2 288);
  --font-tcb03-sans: 'Bricolage Grotesque', system-ui, sans-serif;
  --shadow-tcb03-rest: 0 10px 26px -22px rgb(30 20 60 / 0.6);
  --shadow-tcb03-lift: 0 22px 40px -24px rgb(80 40 180 / 0.55);
}
/* 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-03 {
  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=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap">

What changed in the port

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

  • .cb-03__card:has(:checked) — border, translate and shadow — became three has-checked: utilities; the badge's input:checked ~ rule became peer-checked:.
  • The @media (max-width:640px) single-column fallback inverted into the mobile-first sm:grid-cols-3.
  • UI upgrade from the CSS original: plans are now a radio group — the original let users select all three tiers at once. A visible legend names the choice.
  • UI upgrade: muted feature copy rose from #6f6c83 (4.9:1) and #9b98ad (2.7:1) to one oklch(0.5) token (6.2:1), and prices use tabular-nums.
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 Pricing Plan Card Select — Checkbox-Style Selectable Cards
Source: https://codefronts.com/components/tailwind-css-checkboxes/tailwind-pricing-plan-card-select/

Selectable pricing cards that lift, outline and badge themselves on selection — all from has-checked: on the card label. Because plans are mutually exclusive, the port quietly swaps the original checkboxes for a named radio group: same look, correct semantics, arrow-key navigation for free.
## HTML
```html
<section class="tcb-03 w-full min-h-svh grid place-items-center bg-tcb03-bg px-5 py-14 font-tcb03-sans text-tcb03-ink selection:bg-tcb03-acc selection:text-white" aria-label="Pricing plan selector">
  <fieldset class="w-full max-w-3xl">
    <legend class="mb-6 w-full text-center text-2xl font-extrabold tracking-[-0.02em]">Pick your plan</legend>
    <div class="grid gap-4 sm:grid-cols-3">
      <label class="group relative flex cursor-pointer flex-col gap-1.5 rounded-2xl border-2 border-tcb03-line bg-white px-5 py-5.5 shadow-tcb03-rest transition duration-300 ease-[cubic-bezier(.2,.8,.2,1)] hover:border-tcb03-hover has-checked:-translate-y-1 has-checked:border-tcb03-acc has-checked:shadow-tcb03-lift has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb03-acc motion-reduce:transition-none motion-reduce:has-checked:translate-y-0"><input type="radio" name="tcb03-plan" class="peer sr-only">
        <span aria-hidden="true" class="absolute right-3.5 top-3.5 grid size-[22px] place-items-center rounded-full border-2 border-tcb03-line bg-white text-white transition-colors duration-200 peer-checked:border-tcb03-acc peer-checked:bg-tcb03-acc"><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 scale-40 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="text-[13px] font-bold uppercase tracking-[0.06em] text-tcb03-mut">Starter</span>
        <span class="text-[32px] font-extrabold tabular-nums tracking-[-0.02em]">$9<span class="text-sm font-semibold text-tcb03-mut">/mo</span></span>
        <span class="mt-0.5 text-[13px] leading-normal text-tcb03-mut">3 projects · 1 seat · community support</span>
      </label>
      <label class="group relative flex cursor-pointer flex-col gap-1.5 rounded-2xl border-2 border-tcb03-line bg-white px-5 py-5.5 shadow-tcb03-rest transition duration-300 ease-[cubic-bezier(.2,.8,.2,1)] hover:border-tcb03-hover has-checked:-translate-y-1 has-checked:border-tcb03-acc has-checked:shadow-tcb03-lift has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb03-acc motion-reduce:transition-none motion-reduce:has-checked:translate-y-0"><input type="radio" name="tcb03-plan" class="peer sr-only" checked>
        <span aria-hidden="true" class="absolute right-3.5 top-3.5 grid size-[22px] place-items-center rounded-full border-2 border-tcb03-line bg-white text-white transition-colors duration-200 peer-checked:border-tcb03-acc peer-checked:bg-tcb03-acc"><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 scale-40 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="absolute -top-2.5 left-5 rounded-full bg-tcb03-acc px-2.5 py-0.5 text-[10.5px] font-bold uppercase tracking-[0.1em] text-white">Popular</span>
        <span class="text-[13px] font-bold uppercase tracking-[0.06em] text-tcb03-mut">Growth</span>
        <span class="text-[32px] font-extrabold tabular-nums tracking-[-0.02em]">$29<span class="text-sm font-semibold text-tcb03-mut">/mo</span></span>
        <span class="mt-0.5 text-[13px] leading-normal text-tcb03-mut">Unlimited projects · 5 seats · priority support</span>
      </label>
      <label class="group relative flex cursor-pointer flex-col gap-1.5 rounded-2xl border-2 border-tcb03-line bg-white px-5 py-5.5 shadow-tcb03-rest transition duration-300 ease-[cubic-bezier(.2,.8,.2,1)] hover:border-tcb03-hover has-checked:-translate-y-1 has-checked:border-tcb03-acc has-checked:shadow-tcb03-lift has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcb03-acc motion-reduce:transition-none motion-reduce:has-checked:translate-y-0"><input type="radio" name="tcb03-plan" class="peer sr-only">
        <span aria-hidden="true" class="absolute right-3.5 top-3.5 grid size-[22px] place-items-center rounded-full border-2 border-tcb03-line bg-white text-white transition-colors duration-200 peer-checked:border-tcb03-acc peer-checked:bg-tcb03-acc"><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 scale-40 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="text-[13px] font-bold uppercase tracking-[0.06em] text-tcb03-mut">Scale</span>
        <span class="text-[32px] font-extrabold tabular-nums tracking-[-0.02em]">$79<span class="text-sm font-semibold text-tcb03-mut">/mo</span></span>
        <span class="mt-0.5 text-[13px] leading-normal text-tcb03-mut">SSO · audit logs · dedicated CSM</span>
      </label>
    </div>
  </fieldset>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb03-bg: #f5f4f8;
  --color-tcb03-bg: oklch(0.97 0.006 295);
  --color-tcb03-ink: #22203a;
  --color-tcb03-ink: oklch(0.25 0.04 290);
  --color-tcb03-mut: #625f78;
  --color-tcb03-mut: oklch(0.5 0.03 290);
  --color-tcb03-line: #e5e4ee;
  --color-tcb03-line: oklch(0.92 0.01 290);
  --color-tcb03-hover: #c7c4dd;
  --color-tcb03-hover: oklch(0.83 0.03 290);
  --color-tcb03-acc: #6a3fd6;
  --color-tcb03-acc: oklch(0.52 0.2 288);
  --font-tcb03-sans: 'Bricolage Grotesque', system-ui, sans-serif;
  --shadow-tcb03-rest: 0 10px 26px -22px rgb(30 20 60 / 0.6);
  --shadow-tcb03-lift: 0 22px 40px -24px rgb(80 40 180 / 0.55);
}
/* 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-03 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

A card is a label. Every visual — border, lift, shadow — keys off has-checked: on the card itself, so the whole surface is the click target.

Checkbox look, radio behaviour. A pricing tier is single-choice. The original let users tick all three plans; here a shared name makes the browser enforce one, and arrow keys move between cards.

The badge is the peer's next sibling, so peer-checked: fills it; the tick inside reads from the card with group-has-checked:.

Make it yours

  • Add-ons instead of plans: switch back to type="checkbox" — every utility still works.
  • Re-theme: --color-tcb03-acc drives border, badge, tag and glow.
  • Horizontal list: sm:grid-cols-1 + flex-row on the card for a compact plan list.
  • No lift: drop has-checked:-translate-y-1 for flat dashboard layouts.

Gotchas — read before shipping

  • Radios can't be unchecked by clicking again — that's correct for plans, wrong for add-ons.
  • Keep the motion-reduce:has-checked:translate-y-0 guard so the lift doesn't animate for vestibular-sensitive users.
  • The ring sits on the card via has-focus-visible:; the badge doesn't need its own.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() for the card styles needs Firefox 121+; older engines still show the badge state.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗box-shadowtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →