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

Pulse Ring Checkbox in Tailwind CSS — Live Status Indicator

Round checkboxes that broadcast when on: two rings pulse outward half a cycle apart ([animation-delay:1s]), and checked rows gain a red LIVE chip. The rings live behind the box as siblings, so no negative z-index games.

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-23 w-full min-h-svh grid place-items-center bg-tcb23-bg px-5 py-14 font-tcb23-sans text-tcb23-ink selection:bg-tcb23-acc selection:text-white" aria-label="Pulse ring checkboxes">
  <div class="w-full max-w-[25rem] rounded-2xl border border-tcb23-line bg-white px-4 py-3">
    <label class="group flex min-h-15 cursor-pointer items-center gap-4.5 px-2"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-6 flex-none place-items-center rounded-full peer-focus-visible:outline-3 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-tcb23-acc"><span class="col-start-1 row-start-1 size-6 rounded-full border-2 border-tcb23-acc opacity-0 group-has-checked:animate-tcb23-pulse motion-reduce:hidden"></span><span class="col-start-1 row-start-1 size-6 rounded-full border-2 border-tcb23-acc opacity-0 [animation-delay:1s] group-has-checked:animate-tcb23-pulse motion-reduce:hidden"></span><span class="col-start-1 row-start-1 grid size-6 place-items-center rounded-full border-2 border-tcb23-box bg-white text-white transition-colors duration-250 group-has-checked:border-tcb23-acc group-has-checked:bg-tcb23-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.5 scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span></span><span class="flex-1 text-[15px] group-has-checked:font-semibold">Go live now</span><span class="hidden items-center rounded-md bg-tcb23-acc px-2 py-0.5 font-tcb23-mono text-[10.5px] font-bold tracking-[0.12em] text-white group-has-checked:inline-flex">LIVE</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4.5 px-2"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-6 flex-none place-items-center rounded-full peer-focus-visible:outline-3 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-tcb23-acc"><span class="col-start-1 row-start-1 size-6 rounded-full border-2 border-tcb23-acc opacity-0 group-has-checked:animate-tcb23-pulse motion-reduce:hidden"></span><span class="col-start-1 row-start-1 size-6 rounded-full border-2 border-tcb23-acc opacity-0 [animation-delay:1s] group-has-checked:animate-tcb23-pulse motion-reduce:hidden"></span><span class="col-start-1 row-start-1 grid size-6 place-items-center rounded-full border-2 border-tcb23-box bg-white text-white transition-colors duration-250 group-has-checked:border-tcb23-acc group-has-checked:bg-tcb23-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.5 scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span></span><span class="flex-1 text-[15px] group-has-checked:font-semibold">Broadcast status</span><span class="hidden items-center rounded-md bg-tcb23-acc px-2 py-0.5 font-tcb23-mono text-[10.5px] font-bold tracking-[0.12em] text-white group-has-checked:inline-flex">LIVE</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4.5 px-2"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-6 flex-none place-items-center rounded-full peer-focus-visible:outline-3 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-tcb23-acc"><span class="col-start-1 row-start-1 size-6 rounded-full border-2 border-tcb23-acc opacity-0 group-has-checked:animate-tcb23-pulse motion-reduce:hidden"></span><span class="col-start-1 row-start-1 size-6 rounded-full border-2 border-tcb23-acc opacity-0 [animation-delay:1s] group-has-checked:animate-tcb23-pulse motion-reduce:hidden"></span><span class="col-start-1 row-start-1 grid size-6 place-items-center rounded-full border-2 border-tcb23-box bg-white text-white transition-colors duration-250 group-has-checked:border-tcb23-acc group-has-checked:bg-tcb23-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.5 scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span></span><span class="flex-1 text-[15px] group-has-checked:font-semibold">Ping teammates</span><span class="hidden items-center rounded-md bg-tcb23-acc px-2 py-0.5 font-tcb23-mono text-[10.5px] font-bold tracking-[0.12em] text-white group-has-checked:inline-flex">LIVE</span></label>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb23-bg: #faf4f4;
  --color-tcb23-bg: oklch(0.97 0.008 15);
  --color-tcb23-ink: #3a2727;
  --color-tcb23-ink: oklch(0.29 0.03 15);
  --color-tcb23-line: #f0dddd;
  --color-tcb23-line: oklch(0.92 0.02 15);
  --color-tcb23-box: #d49a9a;
  --color-tcb23-box: oklch(0.74 0.07 18);
  --color-tcb23-acc: #d7263d;
  --color-tcb23-acc: oklch(0.56 0.21 18);
  --font-tcb23-sans: 'Geist', system-ui, sans-serif;
  --font-tcb23-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-tcb23-pulse: tcb23-pulse 2s ease-out infinite;

  @keyframes tcb23-pulse {
    0% {
      opacity: 0.5;
      scale: 1;
    }

    100% {
      opacity: 0;
      scale: 2.4;
    }
  }
}
/* 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-23 {
  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-tcb23-bg: #faf4f4;
  --color-tcb23-bg: oklch(0.97 0.008 15);
  --color-tcb23-ink: #3a2727;
  --color-tcb23-ink: oklch(0.29 0.03 15);
  --color-tcb23-line: #f0dddd;
  --color-tcb23-line: oklch(0.92 0.02 15);
  --color-tcb23-box: #d49a9a;
  --color-tcb23-box: oklch(0.74 0.07 18);
  --color-tcb23-acc: #d7263d;
  --color-tcb23-acc: oklch(0.56 0.21 18);
  --font-tcb23-sans: 'Geist', system-ui, sans-serif;
  --font-tcb23-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-tcb23-pulse: tcb23-pulse 2s ease-out infinite;

  @keyframes tcb23-pulse {
    0% {
      opacity: 0.5;
      scale: 1;
    }

    100% {
      opacity: 0;
      scale: 2.4;
    }
  }
}
/* 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-23 {
  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&family=JetBrains+Mono:wght@400;500;600;700&display=swap">

What changed in the port

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

  • .r2{animation:… 1s} became [animation-delay:1s] — the one place an arbitrary property beats a utility, since delay-* targets transitions.
  • The z-index:-1 rings became grid-stacked siblings (col-start-1 row-start-1), removing the stacking-context fragility.
  • UI upgrade from the CSS original: checked rows show a LIVE chip and a bolder label, so state reads without watching the animation.
  • UI upgrade: the accent darkened to oklch(0.56) for 4.8:1 behind white, and the empty border rose from 1.7: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: Pulse Ring Checkbox in Tailwind CSS — Live Status Indicator
Source: https://codefronts.com/components/tailwind-css-checkboxes/pulse-ring-checkbox-tailwind-live-status/

Round checkboxes that broadcast when on: two rings pulse outward half a cycle apart ([animation-delay:1s]), and checked rows gain a red LIVE chip. The rings live behind the box as siblings, so no negative z-index games.
## HTML
```html
<section class="tcb-23 w-full min-h-svh grid place-items-center bg-tcb23-bg px-5 py-14 font-tcb23-sans text-tcb23-ink selection:bg-tcb23-acc selection:text-white" aria-label="Pulse ring checkboxes">
  <div class="w-full max-w-[25rem] rounded-2xl border border-tcb23-line bg-white px-4 py-3">
    <label class="group flex min-h-15 cursor-pointer items-center gap-4.5 px-2"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-6 flex-none place-items-center rounded-full peer-focus-visible:outline-3 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-tcb23-acc"><span class="col-start-1 row-start-1 size-6 rounded-full border-2 border-tcb23-acc opacity-0 group-has-checked:animate-tcb23-pulse motion-reduce:hidden"></span><span class="col-start-1 row-start-1 size-6 rounded-full border-2 border-tcb23-acc opacity-0 [animation-delay:1s] group-has-checked:animate-tcb23-pulse motion-reduce:hidden"></span><span class="col-start-1 row-start-1 grid size-6 place-items-center rounded-full border-2 border-tcb23-box bg-white text-white transition-colors duration-250 group-has-checked:border-tcb23-acc group-has-checked:bg-tcb23-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.5 scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span></span><span class="flex-1 text-[15px] group-has-checked:font-semibold">Go live now</span><span class="hidden items-center rounded-md bg-tcb23-acc px-2 py-0.5 font-tcb23-mono text-[10.5px] font-bold tracking-[0.12em] text-white group-has-checked:inline-flex">LIVE</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4.5 px-2"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-6 flex-none place-items-center rounded-full peer-focus-visible:outline-3 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-tcb23-acc"><span class="col-start-1 row-start-1 size-6 rounded-full border-2 border-tcb23-acc opacity-0 group-has-checked:animate-tcb23-pulse motion-reduce:hidden"></span><span class="col-start-1 row-start-1 size-6 rounded-full border-2 border-tcb23-acc opacity-0 [animation-delay:1s] group-has-checked:animate-tcb23-pulse motion-reduce:hidden"></span><span class="col-start-1 row-start-1 grid size-6 place-items-center rounded-full border-2 border-tcb23-box bg-white text-white transition-colors duration-250 group-has-checked:border-tcb23-acc group-has-checked:bg-tcb23-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.5 scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span></span><span class="flex-1 text-[15px] group-has-checked:font-semibold">Broadcast status</span><span class="hidden items-center rounded-md bg-tcb23-acc px-2 py-0.5 font-tcb23-mono text-[10.5px] font-bold tracking-[0.12em] text-white group-has-checked:inline-flex">LIVE</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4.5 px-2"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-6 flex-none place-items-center rounded-full peer-focus-visible:outline-3 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-tcb23-acc"><span class="col-start-1 row-start-1 size-6 rounded-full border-2 border-tcb23-acc opacity-0 group-has-checked:animate-tcb23-pulse motion-reduce:hidden"></span><span class="col-start-1 row-start-1 size-6 rounded-full border-2 border-tcb23-acc opacity-0 [animation-delay:1s] group-has-checked:animate-tcb23-pulse motion-reduce:hidden"></span><span class="col-start-1 row-start-1 grid size-6 place-items-center rounded-full border-2 border-tcb23-box bg-white text-white transition-colors duration-250 group-has-checked:border-tcb23-acc group-has-checked:bg-tcb23-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.5 scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span></span><span class="flex-1 text-[15px] group-has-checked:font-semibold">Ping teammates</span><span class="hidden items-center rounded-md bg-tcb23-acc px-2 py-0.5 font-tcb23-mono text-[10.5px] font-bold tracking-[0.12em] text-white group-has-checked:inline-flex">LIVE</span></label>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb23-bg: #faf4f4;
  --color-tcb23-bg: oklch(0.97 0.008 15);
  --color-tcb23-ink: #3a2727;
  --color-tcb23-ink: oklch(0.29 0.03 15);
  --color-tcb23-line: #f0dddd;
  --color-tcb23-line: oklch(0.92 0.02 15);
  --color-tcb23-box: #d49a9a;
  --color-tcb23-box: oklch(0.74 0.07 18);
  --color-tcb23-acc: #d7263d;
  --color-tcb23-acc: oklch(0.56 0.21 18);
  --font-tcb23-sans: 'Geist', system-ui, sans-serif;
  --font-tcb23-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-tcb23-pulse: tcb23-pulse 2s ease-out infinite;

  @keyframes tcb23-pulse {
    0% {
      opacity: 0.5;
      scale: 1;
    }

    100% {
      opacity: 0;
      scale: 2.4;
    }
  }
}
/* 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-23 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Two rings, one loop. Both run the same 2s keyframe; the second starts 1s late, so a ring leaves every second.

Layering without z-index. The original set z-index:-1 on the rings, which only works if no ancestor forms a stacking context. Here the rings and the box are siblings in a grid stack — later siblings paint on top.

Why an arbitrary property? delay-1000 sets transition-delay, not animation-delay.

Make it yours

  • Speed: edit the token duration and halve it for the delay.
  • Colour: --color-tcb23-acc (green for "online", red for "live").
  • Single ring: remove the delayed one.
  • Chip text: "ON AIR", "REC", "LIVE".

Gotchas — read before shipping

  • Infinite animations draw attention — use them for genuinely live states only.
  • Reduced motion hides the rings; the filled box and chip still show state.
  • Don't swap to Tailwind's animate-ping: it scales to 2 and pulses at full opacity, which is much louder.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Keyframes and the individual scale property: Chrome 104 / Safari 14.1 / Firefox 72.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗

Arbitraryneeds bracket syntax

animation delaytw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →