29 Tailwind CSS Checkboxes
24 / 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 Dash-to-Check SVG Morph Checkbox

A pending dash retracts as a checkmark draws in — two SVG paths trading stroke-dashoffset with a 120ms stagger, while the whole glyph tilts -rotate-8. New: a status label on the right swaps Pending → Approved, so the row states its meaning in words.

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-24 w-full min-h-svh grid place-items-center bg-tcb24-bg px-5 py-14 font-tcb24-sans text-tcb24-ink selection:bg-tcb24-acc selection:text-white" aria-label="Dash to check morph checkboxes">
  <div class="w-full max-w-[26rem] rounded-2xl border border-tcb24-line bg-white px-4 py-2.5">
    <label class="group flex min-h-14 cursor-pointer items-center gap-3.5 px-2"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-7 flex-none place-items-center rounded-lg border-2 border-tcb24-box bg-white text-tcb24-dash transition-colors duration-300 peer-checked:border-tcb24-acc peer-checked:bg-tcb24-acc peer-checked:text-white peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb24-acc motion-reduce:transition-none"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="size-5 transition-[rotate] duration-400 group-has-checked:-rotate-8"><path d="M6 12H18" class="transition-[stroke-dashoffset] duration-300 [stroke-dasharray:12] [stroke-dashoffset:0] group-has-checked:[stroke-dashoffset:12] motion-reduce:transition-none"/><path d="M5 12.5 10 18 20 6" class="transition-[stroke-dashoffset] delay-120 duration-400 ease-[cubic-bezier(.6,.1,.3,1)] [stroke-dasharray:24] [stroke-dashoffset:24] group-has-checked:[stroke-dashoffset:0] motion-reduce:transition-none"/></svg></span><span class="flex-1 text-[15px]">Review approved</span><span aria-hidden="true" class="font-tcb24-mono text-[11px] font-semibold uppercase tracking-[0.08em] text-tcb24-mut after:content-['Pending'] group-has-checked:text-tcb24-acc group-has-checked:after:content-['Approved']"></span></label>
    <label class="group flex min-h-14 cursor-pointer items-center gap-3.5 px-2"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-7 flex-none place-items-center rounded-lg border-2 border-tcb24-box bg-white text-tcb24-dash transition-colors duration-300 peer-checked:border-tcb24-acc peer-checked:bg-tcb24-acc peer-checked:text-white peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb24-acc motion-reduce:transition-none"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="size-5 transition-[rotate] duration-400 group-has-checked:-rotate-8"><path d="M6 12H18" class="transition-[stroke-dashoffset] duration-300 [stroke-dasharray:12] [stroke-dashoffset:0] group-has-checked:[stroke-dashoffset:12] motion-reduce:transition-none"/><path d="M5 12.5 10 18 20 6" class="transition-[stroke-dashoffset] delay-120 duration-400 ease-[cubic-bezier(.6,.1,.3,1)] [stroke-dasharray:24] [stroke-dashoffset:24] group-has-checked:[stroke-dashoffset:0] motion-reduce:transition-none"/></svg></span><span class="flex-1 text-[15px]">Awaiting sign-off</span><span aria-hidden="true" class="font-tcb24-mono text-[11px] font-semibold uppercase tracking-[0.08em] text-tcb24-mut after:content-['Pending'] group-has-checked:text-tcb24-acc group-has-checked:after:content-['Approved']"></span></label>
    <label class="group flex min-h-14 cursor-pointer items-center gap-3.5 px-2"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-7 flex-none place-items-center rounded-lg border-2 border-tcb24-box bg-white text-tcb24-dash transition-colors duration-300 peer-checked:border-tcb24-acc peer-checked:bg-tcb24-acc peer-checked:text-white peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb24-acc motion-reduce:transition-none"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="size-5 transition-[rotate] duration-400 group-has-checked:-rotate-8"><path d="M6 12H18" class="transition-[stroke-dashoffset] duration-300 [stroke-dasharray:12] [stroke-dashoffset:0] group-has-checked:[stroke-dashoffset:12] motion-reduce:transition-none"/><path d="M5 12.5 10 18 20 6" class="transition-[stroke-dashoffset] delay-120 duration-400 ease-[cubic-bezier(.6,.1,.3,1)] [stroke-dasharray:24] [stroke-dashoffset:24] group-has-checked:[stroke-dashoffset:0] motion-reduce:transition-none"/></svg></span><span class="flex-1 text-[15px]">Pending checks</span><span aria-hidden="true" class="font-tcb24-mono text-[11px] font-semibold uppercase tracking-[0.08em] text-tcb24-mut after:content-['Pending'] group-has-checked:text-tcb24-acc group-has-checked:after:content-['Approved']"></span></label>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb24-bg: #eef2f8;
  --color-tcb24-bg: oklch(0.96 0.01 255);
  --color-tcb24-ink: #2c3540;
  --color-tcb24-ink: oklch(0.32 0.02 250);
  --color-tcb24-mut: #5e6a7c;
  --color-tcb24-mut: oklch(0.5 0.03 255);
  --color-tcb24-line: #dde5f0;
  --color-tcb24-line: oklch(0.92 0.013 255);
  --color-tcb24-box: #8e9db4;
  --color-tcb24-box: oklch(0.7 0.035 255);
  --color-tcb24-dash: #6b7890;
  --color-tcb24-dash: oklch(0.57 0.035 255);
  --color-tcb24-acc: #1f6fc0;
  --color-tcb24-acc: oklch(0.53 0.15 250);
  --font-tcb24-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-tcb24-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* 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-24 {
  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-tcb24-bg: #eef2f8;
  --color-tcb24-bg: oklch(0.96 0.01 255);
  --color-tcb24-ink: #2c3540;
  --color-tcb24-ink: oklch(0.32 0.02 250);
  --color-tcb24-mut: #5e6a7c;
  --color-tcb24-mut: oklch(0.5 0.03 255);
  --color-tcb24-line: #dde5f0;
  --color-tcb24-line: oklch(0.92 0.013 255);
  --color-tcb24-box: #8e9db4;
  --color-tcb24-box: oklch(0.7 0.035 255);
  --color-tcb24-dash: #6b7890;
  --color-tcb24-dash: oklch(0.57 0.035 255);
  --color-tcb24-acc: #1f6fc0;
  --color-tcb24-acc: oklch(0.53 0.15 250);
  --font-tcb24-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-tcb24-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* 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-24 {
  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=Instrument+Sans: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.

  • The two path rules and their :checked counterparts became arbitrary [stroke-dash*] properties with group-has-checked:.
  • svg{stroke:#8b98ac} → stroke:#fff became text-tcb24-dash peer-checked:text-white via currentColor.
  • UI upgrade from the CSS original: a Pending / Approved status word on each row, so the state is legible in words, not just glyph shape.
  • UI upgrade: the empty border rose from #b7c4d8 (1.7:1) to 3:1 and the dash from 2.9:1 to 4.6: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 Dash-to-Check SVG Morph Checkbox
Source: https://codefronts.com/components/tailwind-css-checkboxes/tailwind-dash-to-check-svg-morph-checkbox/

A pending dash retracts as a checkmark draws in — two SVG paths trading stroke-dashoffset with a 120ms stagger, while the whole glyph tilts -rotate-8. New: a status label on the right swaps Pending → Approved, so the row states its meaning in words.
## HTML
```html
<section class="tcb-24 w-full min-h-svh grid place-items-center bg-tcb24-bg px-5 py-14 font-tcb24-sans text-tcb24-ink selection:bg-tcb24-acc selection:text-white" aria-label="Dash to check morph checkboxes">
  <div class="w-full max-w-[26rem] rounded-2xl border border-tcb24-line bg-white px-4 py-2.5">
    <label class="group flex min-h-14 cursor-pointer items-center gap-3.5 px-2"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-7 flex-none place-items-center rounded-lg border-2 border-tcb24-box bg-white text-tcb24-dash transition-colors duration-300 peer-checked:border-tcb24-acc peer-checked:bg-tcb24-acc peer-checked:text-white peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb24-acc motion-reduce:transition-none"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="size-5 transition-[rotate] duration-400 group-has-checked:-rotate-8"><path d="M6 12H18" class="transition-[stroke-dashoffset] duration-300 [stroke-dasharray:12] [stroke-dashoffset:0] group-has-checked:[stroke-dashoffset:12] motion-reduce:transition-none"/><path d="M5 12.5 10 18 20 6" class="transition-[stroke-dashoffset] delay-120 duration-400 ease-[cubic-bezier(.6,.1,.3,1)] [stroke-dasharray:24] [stroke-dashoffset:24] group-has-checked:[stroke-dashoffset:0] motion-reduce:transition-none"/></svg></span><span class="flex-1 text-[15px]">Review approved</span><span aria-hidden="true" class="font-tcb24-mono text-[11px] font-semibold uppercase tracking-[0.08em] text-tcb24-mut after:content-['Pending'] group-has-checked:text-tcb24-acc group-has-checked:after:content-['Approved']"></span></label>
    <label class="group flex min-h-14 cursor-pointer items-center gap-3.5 px-2"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-7 flex-none place-items-center rounded-lg border-2 border-tcb24-box bg-white text-tcb24-dash transition-colors duration-300 peer-checked:border-tcb24-acc peer-checked:bg-tcb24-acc peer-checked:text-white peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb24-acc motion-reduce:transition-none"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="size-5 transition-[rotate] duration-400 group-has-checked:-rotate-8"><path d="M6 12H18" class="transition-[stroke-dashoffset] duration-300 [stroke-dasharray:12] [stroke-dashoffset:0] group-has-checked:[stroke-dashoffset:12] motion-reduce:transition-none"/><path d="M5 12.5 10 18 20 6" class="transition-[stroke-dashoffset] delay-120 duration-400 ease-[cubic-bezier(.6,.1,.3,1)] [stroke-dasharray:24] [stroke-dashoffset:24] group-has-checked:[stroke-dashoffset:0] motion-reduce:transition-none"/></svg></span><span class="flex-1 text-[15px]">Awaiting sign-off</span><span aria-hidden="true" class="font-tcb24-mono text-[11px] font-semibold uppercase tracking-[0.08em] text-tcb24-mut after:content-['Pending'] group-has-checked:text-tcb24-acc group-has-checked:after:content-['Approved']"></span></label>
    <label class="group flex min-h-14 cursor-pointer items-center gap-3.5 px-2"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-7 flex-none place-items-center rounded-lg border-2 border-tcb24-box bg-white text-tcb24-dash transition-colors duration-300 peer-checked:border-tcb24-acc peer-checked:bg-tcb24-acc peer-checked:text-white peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb24-acc motion-reduce:transition-none"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="size-5 transition-[rotate] duration-400 group-has-checked:-rotate-8"><path d="M6 12H18" class="transition-[stroke-dashoffset] duration-300 [stroke-dasharray:12] [stroke-dashoffset:0] group-has-checked:[stroke-dashoffset:12] motion-reduce:transition-none"/><path d="M5 12.5 10 18 20 6" class="transition-[stroke-dashoffset] delay-120 duration-400 ease-[cubic-bezier(.6,.1,.3,1)] [stroke-dasharray:24] [stroke-dashoffset:24] group-has-checked:[stroke-dashoffset:0] motion-reduce:transition-none"/></svg></span><span class="flex-1 text-[15px]">Pending checks</span><span aria-hidden="true" class="font-tcb24-mono text-[11px] font-semibold uppercase tracking-[0.08em] text-tcb24-mut after:content-['Pending'] group-has-checked:text-tcb24-acc group-has-checked:after:content-['Approved']"></span></label>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb24-bg: #eef2f8;
  --color-tcb24-bg: oklch(0.96 0.01 255);
  --color-tcb24-ink: #2c3540;
  --color-tcb24-ink: oklch(0.32 0.02 250);
  --color-tcb24-mut: #5e6a7c;
  --color-tcb24-mut: oklch(0.5 0.03 255);
  --color-tcb24-line: #dde5f0;
  --color-tcb24-line: oklch(0.92 0.013 255);
  --color-tcb24-box: #8e9db4;
  --color-tcb24-box: oklch(0.7 0.035 255);
  --color-tcb24-dash: #6b7890;
  --color-tcb24-dash: oklch(0.57 0.035 255);
  --color-tcb24-acc: #1f6fc0;
  --color-tcb24-acc: oklch(0.53 0.15 250);
  --font-tcb24-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-tcb24-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* 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-24 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Two paths, one glyph. The dash (12 units) is drawn by default; the check (24 units) is hidden by its own offset. On check they swap offsets, with the check delayed so they don't overlap.

The status word is generated content on a decorative span (aria-hidden): the checkbox label carries the accessible name, the word is visual reinforcement.

Make it yours

  • Reverse: add a delay to the dash so it redraws after the check retracts on uncheck.
  • Colour per state: group-has-checked:after:text-*.
  • Tilt: -rotate-8 → rotate-0 for a stricter look.
  • Localise the status strings (underscores for spaces).

Gotchas — read before shipping

  • Dash lengths must match the paths; re-measure if you edit the d attributes.
  • Delays apply both ways — tune them so unchecking isn't sluggish.
  • Keep the status word out of the accessible name to avoid double announcements.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

SVG stroke transitions are universal.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transition delaytw ↗content propertytw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →