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

Slide-In Label Checkbox in Tailwind CSS — Saved Tag Reveal

Checking a row slides a SAVED tag in from the left, pushing the label along. The port rebuilds the mechanics: instead of translating a tag into overlap and patching the gap with margin-right, the tag sits in a grid column that animates grid-cols-[0fr_auto] → grid-cols-[1fr_auto], so the label moves because the layout does.

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-28 w-full min-h-svh grid place-items-center bg-tcb28-bg px-5 py-14 font-tcb28-sans text-tcb28-mut selection:bg-tcb28-acc selection:text-white" aria-label="Slide-in label checkboxes">
  <div class="w-full max-w-[26rem] rounded-2xl border border-tcb28-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-6 flex-none place-items-center rounded-[7px] border-2 border-tcb28-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb28-acc peer-checked:bg-tcb28-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb28-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.2)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="inline-grid grid-cols-[0fr_auto] items-center transition-[grid-template-columns] duration-350 ease-[cubic-bezier(.3,.9,.3,1)] group-has-checked:grid-cols-[1fr_auto] motion-reduce:transition-none"><span aria-hidden="true" class="min-w-0 overflow-hidden"><span class="mr-2 inline-block -translate-x-full rounded-md bg-tcb28-acc px-2 py-0.5 font-tcb28-mono text-[11px] font-bold uppercase tracking-[0.08em] text-white opacity-0 transition duration-350 ease-[cubic-bezier(.3,.9,.3,1)] group-has-checked:translate-x-0 group-has-checked:opacity-100 motion-reduce:translate-x-0">Saved</span></span><span class="text-[15px] font-medium transition-colors group-has-checked:text-tcb28-ink">Keep in library</span></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-6 flex-none place-items-center rounded-[7px] border-2 border-tcb28-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb28-acc peer-checked:bg-tcb28-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb28-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.2)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="inline-grid grid-cols-[0fr_auto] items-center transition-[grid-template-columns] duration-350 ease-[cubic-bezier(.3,.9,.3,1)] group-has-checked:grid-cols-[1fr_auto] motion-reduce:transition-none"><span aria-hidden="true" class="min-w-0 overflow-hidden"><span class="mr-2 inline-block -translate-x-full rounded-md bg-tcb28-acc px-2 py-0.5 font-tcb28-mono text-[11px] font-bold uppercase tracking-[0.08em] text-white opacity-0 transition duration-350 ease-[cubic-bezier(.3,.9,.3,1)] group-has-checked:translate-x-0 group-has-checked:opacity-100 motion-reduce:translate-x-0">Saved</span></span><span class="text-[15px] font-medium transition-colors group-has-checked:text-tcb28-ink">Pin to sidebar</span></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-6 flex-none place-items-center rounded-[7px] border-2 border-tcb28-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb28-acc peer-checked:bg-tcb28-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb28-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.2)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="inline-grid grid-cols-[0fr_auto] items-center transition-[grid-template-columns] duration-350 ease-[cubic-bezier(.3,.9,.3,1)] group-has-checked:grid-cols-[1fr_auto] motion-reduce:transition-none"><span aria-hidden="true" class="min-w-0 overflow-hidden"><span class="mr-2 inline-block -translate-x-full rounded-md bg-tcb28-acc px-2 py-0.5 font-tcb28-mono text-[11px] font-bold uppercase tracking-[0.08em] text-white opacity-0 transition duration-350 ease-[cubic-bezier(.3,.9,.3,1)] group-has-checked:translate-x-0 group-has-checked:opacity-100 motion-reduce:translate-x-0">Saved</span></span><span class="text-[15px] font-medium transition-colors group-has-checked:text-tcb28-ink">Add to watchlist</span></span></label>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb28-bg: #eef5f6;
  --color-tcb28-bg: oklch(0.965 0.008 205);
  --color-tcb28-ink: #1f2f30;
  --color-tcb28-ink: oklch(0.28 0.02 205);
  --color-tcb28-mut: #4c5f61;
  --color-tcb28-mut: oklch(0.46 0.02 205);
  --color-tcb28-line: #daeaeb;
  --color-tcb28-line: oklch(0.92 0.015 205);
  --color-tcb28-box: #8fb0b3;
  --color-tcb28-box: oklch(0.72 0.035 205);
  --color-tcb28-acc: #137580;
  --color-tcb28-acc: oklch(0.5 0.09 205);
  --font-tcb28-sans: 'Manrope', system-ui, sans-serif;
  --font-tcb28-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-28 {
  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-tcb28-bg: #eef5f6;
  --color-tcb28-bg: oklch(0.965 0.008 205);
  --color-tcb28-ink: #1f2f30;
  --color-tcb28-ink: oklch(0.28 0.02 205);
  --color-tcb28-mut: #4c5f61;
  --color-tcb28-mut: oklch(0.46 0.02 205);
  --color-tcb28-line: #daeaeb;
  --color-tcb28-line: oklch(0.92 0.015 205);
  --color-tcb28-box: #8fb0b3;
  --color-tcb28-box: oklch(0.72 0.035 205);
  --color-tcb28-acc: #137580;
  --color-tcb28-acc: oklch(0.5 0.09 205);
  --font-tcb28-sans: 'Manrope', system-ui, sans-serif;
  --font-tcb28-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-28 {
  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&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 translateX(-120%) tag + margin-right toggle + translateX(-30px) label were replaced by one animated grid column.
  • .labels{overflow:hidden} became min-w-0 overflow-hidden on the tag cell only, so focus rings and descenders on the label are no longer clipped.
  • UI upgrade from the CSS original: the label's resting position no longer depends on a hard-coded −30px, so it lines up with the box for any tag text.
  • UI upgrade: unchecked labels are muted, checked ones ink — the row reads as "saved" at a glance; 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: Slide-In Label Checkbox in Tailwind CSS — Saved Tag Reveal
Source: https://codefronts.com/components/tailwind-css-checkboxes/slide-in-label-checkbox-tailwind/

Checking a row slides a SAVED tag in from the left, pushing the label along. The port rebuilds the mechanics: instead of translating a tag into overlap and patching the gap with margin-right, the tag sits in a grid column that animates grid-cols-[0fr_auto] → grid-cols-[1fr_auto], so the label moves because the layout does.
## HTML
```html
<section class="tcb-28 w-full min-h-svh grid place-items-center bg-tcb28-bg px-5 py-14 font-tcb28-sans text-tcb28-mut selection:bg-tcb28-acc selection:text-white" aria-label="Slide-in label checkboxes">
  <div class="w-full max-w-[26rem] rounded-2xl border border-tcb28-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-6 flex-none place-items-center rounded-[7px] border-2 border-tcb28-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb28-acc peer-checked:bg-tcb28-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb28-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.2)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="inline-grid grid-cols-[0fr_auto] items-center transition-[grid-template-columns] duration-350 ease-[cubic-bezier(.3,.9,.3,1)] group-has-checked:grid-cols-[1fr_auto] motion-reduce:transition-none"><span aria-hidden="true" class="min-w-0 overflow-hidden"><span class="mr-2 inline-block -translate-x-full rounded-md bg-tcb28-acc px-2 py-0.5 font-tcb28-mono text-[11px] font-bold uppercase tracking-[0.08em] text-white opacity-0 transition duration-350 ease-[cubic-bezier(.3,.9,.3,1)] group-has-checked:translate-x-0 group-has-checked:opacity-100 motion-reduce:translate-x-0">Saved</span></span><span class="text-[15px] font-medium transition-colors group-has-checked:text-tcb28-ink">Keep in library</span></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-6 flex-none place-items-center rounded-[7px] border-2 border-tcb28-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb28-acc peer-checked:bg-tcb28-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb28-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.2)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="inline-grid grid-cols-[0fr_auto] items-center transition-[grid-template-columns] duration-350 ease-[cubic-bezier(.3,.9,.3,1)] group-has-checked:grid-cols-[1fr_auto] motion-reduce:transition-none"><span aria-hidden="true" class="min-w-0 overflow-hidden"><span class="mr-2 inline-block -translate-x-full rounded-md bg-tcb28-acc px-2 py-0.5 font-tcb28-mono text-[11px] font-bold uppercase tracking-[0.08em] text-white opacity-0 transition duration-350 ease-[cubic-bezier(.3,.9,.3,1)] group-has-checked:translate-x-0 group-has-checked:opacity-100 motion-reduce:translate-x-0">Saved</span></span><span class="text-[15px] font-medium transition-colors group-has-checked:text-tcb28-ink">Pin to sidebar</span></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-6 flex-none place-items-center rounded-[7px] border-2 border-tcb28-box bg-white text-white transition-colors duration-200 peer-checked:border-tcb28-acc peer-checked:bg-tcb28-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb28-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.2)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="inline-grid grid-cols-[0fr_auto] items-center transition-[grid-template-columns] duration-350 ease-[cubic-bezier(.3,.9,.3,1)] group-has-checked:grid-cols-[1fr_auto] motion-reduce:transition-none"><span aria-hidden="true" class="min-w-0 overflow-hidden"><span class="mr-2 inline-block -translate-x-full rounded-md bg-tcb28-acc px-2 py-0.5 font-tcb28-mono text-[11px] font-bold uppercase tracking-[0.08em] text-white opacity-0 transition duration-350 ease-[cubic-bezier(.3,.9,.3,1)] group-has-checked:translate-x-0 group-has-checked:opacity-100 motion-reduce:translate-x-0">Saved</span></span><span class="text-[15px] font-medium transition-colors group-has-checked:text-tcb28-ink">Add to watchlist</span></span></label>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb28-bg: #eef5f6;
  --color-tcb28-bg: oklch(0.965 0.008 205);
  --color-tcb28-ink: #1f2f30;
  --color-tcb28-ink: oklch(0.28 0.02 205);
  --color-tcb28-mut: #4c5f61;
  --color-tcb28-mut: oklch(0.46 0.02 205);
  --color-tcb28-line: #daeaeb;
  --color-tcb28-line: oklch(0.92 0.015 205);
  --color-tcb28-box: #8fb0b3;
  --color-tcb28-box: oklch(0.72 0.035 205);
  --color-tcb28-acc: #137580;
  --color-tcb28-acc: oklch(0.5 0.09 205);
  --font-tcb28-sans: 'Manrope', system-ui, sans-serif;
  --font-tcb28-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-28 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Width without measuring. Like the accordion's 0fr → 1fr rows, a grid column can animate from zero to its content width. The tag's cell grows, and the label — in the next column — slides naturally.

Two motions. The column opens while the tag itself translates in from its left edge, so it appears to push in rather than grow.

Why the original drifted. It translated the label by a fixed −30px and toggled the tag's margin, so label position depended on the tag's text width.

Make it yours

  • Tag text: any length — the column adapts.
  • Icon tag: replace the text with a bookmark SVG.
  • Speed: duration-350 on the grid.
  • Tag colour: --color-tcb28-acc.

Gotchas — read before shipping

  • The tag is aria-hidden; the checkbox state is the accessible truth.
  • Animating grid tracks is a layout animation; fine for short lists.
  • The 1fr column only grows to its content because the grid is inline-grid.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Animated grid-template-columns: Chrome 107, Safari 16, Firefox 66.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →