29 Tailwind CSS Checkboxes
26 / 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
Tailwind + JSMIT licensed

Magnetic Hover Checkbox in Tailwind CSS + JavaScript

The box leans toward your pointer as it crosses the row and springs back when you leave. The script writes only two custom properties, which v4 reads with translate-x-(--tcb26-dx); the label now follows at half strength for a layered parallax, and updates are batched per frame.

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-26 w-full min-h-svh grid place-items-center bg-tcb26-bg px-5 py-14 font-tcb26-sans text-tcb26-ink selection:bg-tcb26-acc selection:text-white" data-tcb26 aria-label="Magnetic checkboxes">
  <div class="w-full max-w-[25rem] rounded-2xl border border-tcb26-line bg-white px-4 py-2">
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 rounded-xl px-2.5 transition-colors [--tcb26-dx:0px] [--tcb26-dy:0px] hover:bg-tcb26-hover" data-magnet><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[26px] flex-none translate-x-(--tcb26-dx) translate-y-(--tcb26-dy) place-items-center rounded-lg border-2 border-tcb26-box bg-white text-white transition-[translate,background-color,border-color] duration-300 ease-[cubic-bezier(.3,1.2,.4,1)] peer-checked:border-tcb26-acc peer-checked:bg-tcb26-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb26-acc motion-reduce:translate-0"><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-[15px] 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="translate-x-[calc(var(--tcb26-dx)/2)] translate-y-[calc(var(--tcb26-dy)/2)] text-[15px] transition-[translate] duration-300 ease-[cubic-bezier(.3,1.2,.4,1)] motion-reduce:translate-0">Snap to grid</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 rounded-xl px-2.5 transition-colors [--tcb26-dx:0px] [--tcb26-dy:0px] hover:bg-tcb26-hover" data-magnet><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-[26px] flex-none translate-x-(--tcb26-dx) translate-y-(--tcb26-dy) place-items-center rounded-lg border-2 border-tcb26-box bg-white text-white transition-[translate,background-color,border-color] duration-300 ease-[cubic-bezier(.3,1.2,.4,1)] peer-checked:border-tcb26-acc peer-checked:bg-tcb26-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb26-acc motion-reduce:translate-0"><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-[15px] 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="translate-x-[calc(var(--tcb26-dx)/2)] translate-y-[calc(var(--tcb26-dy)/2)] text-[15px] transition-[translate] duration-300 ease-[cubic-bezier(.3,1.2,.4,1)] motion-reduce:translate-0">Magnetic guides</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 rounded-xl px-2.5 transition-colors [--tcb26-dx:0px] [--tcb26-dy:0px] hover:bg-tcb26-hover" data-magnet><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-[26px] flex-none translate-x-(--tcb26-dx) translate-y-(--tcb26-dy) place-items-center rounded-lg border-2 border-tcb26-box bg-white text-white transition-[translate,background-color,border-color] duration-300 ease-[cubic-bezier(.3,1.2,.4,1)] peer-checked:border-tcb26-acc peer-checked:bg-tcb26-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb26-acc motion-reduce:translate-0"><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-[15px] 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="translate-x-[calc(var(--tcb26-dx)/2)] translate-y-[calc(var(--tcb26-dy)/2)] text-[15px] transition-[translate] duration-300 ease-[cubic-bezier(.3,1.2,.4,1)] motion-reduce:translate-0">Auto-align nodes</span></label>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb26-bg: #f3f3fa;
  --color-tcb26-bg: oklch(0.965 0.008 280);
  --color-tcb26-ink: #2d2a3d;
  --color-tcb26-ink: oklch(0.29 0.03 285);
  --color-tcb26-line: #e6e5f2;
  --color-tcb26-line: oklch(0.925 0.012 285);
  --color-tcb26-hover: #f7f7fc;
  --color-tcb26-hover: oklch(0.978 0.006 285);
  --color-tcb26-box: #9c99b8;
  --color-tcb26-box: oklch(0.7 0.04 285);
  --color-tcb26-acc: #5b4bd6;
  --color-tcb26-acc: oklch(0.52 0.19 280);
  --font-tcb26-sans: 'Sora', system-ui, sans-serif;
}
/* 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-26 {
  width: 100%;
  min-height: 100svh;
}
(() => {
  if (matchMedia('(hover: none)').matches || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  const MAX = 6;
  document.querySelectorAll('[data-tcb26]').forEach((root) => {
    if (root.dataset.wired) return;
    root.dataset.wired = '1';
    root.querySelectorAll('[data-magnet]').forEach((row) => {
      const box = row.querySelector('[aria-hidden]');
      let raf = 0, x = 0, y = 0;
      const write = () => {
        raf = 0;
        row.style.setProperty('--tcb26-dx', x.toFixed(1) + 'px');
        row.style.setProperty('--tcb26-dy', y.toFixed(1) + 'px');
      };
      row.addEventListener('pointermove', (e) => {
        const r = box.getBoundingClientRect();
        x = Math.max(-MAX, Math.min(MAX, (e.clientX - (r.left + r.width / 2)) / 3));
        y = Math.max(-MAX, Math.min(MAX, (e.clientY - (r.top + r.height / 2)) / 3));
        if (!raf) raf = requestAnimationFrame(write);
      });
      row.addEventListener('pointerleave', () => { x = 0; y = 0; if (!raf) raf = requestAnimationFrame(write); });
    });
  });
})();

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-tcb26-bg: #f3f3fa;
  --color-tcb26-bg: oklch(0.965 0.008 280);
  --color-tcb26-ink: #2d2a3d;
  --color-tcb26-ink: oklch(0.29 0.03 285);
  --color-tcb26-line: #e6e5f2;
  --color-tcb26-line: oklch(0.925 0.012 285);
  --color-tcb26-hover: #f7f7fc;
  --color-tcb26-hover: oklch(0.978 0.006 285);
  --color-tcb26-box: #9c99b8;
  --color-tcb26-box: oklch(0.7 0.04 285);
  --color-tcb26-acc: #5b4bd6;
  --color-tcb26-acc: oklch(0.52 0.19 280);
  --font-tcb26-sans: 'Sora', system-ui, sans-serif;
}
/* 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-26 {
  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=Sora:wght@400;500;600;700&display=swap">

What changed in the port

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

  • transform:translate(var(--dx),var(--dy)) became translate-x-(--tcb26-dx) translate-y-(--tcb26-dy); the variables are namespaced so they can't collide.
  • The script finds its box via [aria-hidden] and its root via data-tcb26 — no class selectors.
  • UI upgrade from the CSS original: the label follows at half strength for a parallax feel, rows tint on hover, and pointer updates are rAF-batched instead of writing styles on every event.
  • UI upgrade: the empty border rose from #c2c0d8 (1.8: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: Magnetic Hover Checkbox in Tailwind CSS + JavaScript
Source: https://codefronts.com/components/tailwind-css-checkboxes/magnetic-hover-checkbox-tailwind-javascript/

The box leans toward your pointer as it crosses the row and springs back when you leave. The script writes only two custom properties, which v4 reads with translate-x-(--tcb26-dx); the label now follows at half strength for a layered parallax, and updates are batched per frame.
## HTML
```html
<section class="tcb-26 w-full min-h-svh grid place-items-center bg-tcb26-bg px-5 py-14 font-tcb26-sans text-tcb26-ink selection:bg-tcb26-acc selection:text-white" data-tcb26 aria-label="Magnetic checkboxes">
  <div class="w-full max-w-[25rem] rounded-2xl border border-tcb26-line bg-white px-4 py-2">
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 rounded-xl px-2.5 transition-colors [--tcb26-dx:0px] [--tcb26-dy:0px] hover:bg-tcb26-hover" data-magnet><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[26px] flex-none translate-x-(--tcb26-dx) translate-y-(--tcb26-dy) place-items-center rounded-lg border-2 border-tcb26-box bg-white text-white transition-[translate,background-color,border-color] duration-300 ease-[cubic-bezier(.3,1.2,.4,1)] peer-checked:border-tcb26-acc peer-checked:bg-tcb26-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb26-acc motion-reduce:translate-0"><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-[15px] 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="translate-x-[calc(var(--tcb26-dx)/2)] translate-y-[calc(var(--tcb26-dy)/2)] text-[15px] transition-[translate] duration-300 ease-[cubic-bezier(.3,1.2,.4,1)] motion-reduce:translate-0">Snap to grid</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 rounded-xl px-2.5 transition-colors [--tcb26-dx:0px] [--tcb26-dy:0px] hover:bg-tcb26-hover" data-magnet><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-[26px] flex-none translate-x-(--tcb26-dx) translate-y-(--tcb26-dy) place-items-center rounded-lg border-2 border-tcb26-box bg-white text-white transition-[translate,background-color,border-color] duration-300 ease-[cubic-bezier(.3,1.2,.4,1)] peer-checked:border-tcb26-acc peer-checked:bg-tcb26-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb26-acc motion-reduce:translate-0"><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-[15px] 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="translate-x-[calc(var(--tcb26-dx)/2)] translate-y-[calc(var(--tcb26-dy)/2)] text-[15px] transition-[translate] duration-300 ease-[cubic-bezier(.3,1.2,.4,1)] motion-reduce:translate-0">Magnetic guides</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 rounded-xl px-2.5 transition-colors [--tcb26-dx:0px] [--tcb26-dy:0px] hover:bg-tcb26-hover" data-magnet><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-[26px] flex-none translate-x-(--tcb26-dx) translate-y-(--tcb26-dy) place-items-center rounded-lg border-2 border-tcb26-box bg-white text-white transition-[translate,background-color,border-color] duration-300 ease-[cubic-bezier(.3,1.2,.4,1)] peer-checked:border-tcb26-acc peer-checked:bg-tcb26-acc peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb26-acc motion-reduce:translate-0"><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-[15px] 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="translate-x-[calc(var(--tcb26-dx)/2)] translate-y-[calc(var(--tcb26-dy)/2)] text-[15px] transition-[translate] duration-300 ease-[cubic-bezier(.3,1.2,.4,1)] motion-reduce:translate-0">Auto-align nodes</span></label>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb26-bg: #f3f3fa;
  --color-tcb26-bg: oklch(0.965 0.008 280);
  --color-tcb26-ink: #2d2a3d;
  --color-tcb26-ink: oklch(0.29 0.03 285);
  --color-tcb26-line: #e6e5f2;
  --color-tcb26-line: oklch(0.925 0.012 285);
  --color-tcb26-hover: #f7f7fc;
  --color-tcb26-hover: oklch(0.978 0.006 285);
  --color-tcb26-box: #9c99b8;
  --color-tcb26-box: oklch(0.7 0.04 285);
  --color-tcb26-acc: #5b4bd6;
  --color-tcb26-acc: oklch(0.52 0.19 280);
  --font-tcb26-sans: 'Sora', system-ui, sans-serif;
}
/* 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-26 {
  width: 100%;
  min-height: 100svh;
}
```

## JavaScript
```js
(() => {
  if (matchMedia('(hover: none)').matches || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  const MAX = 6;
  document.querySelectorAll('[data-tcb26]').forEach((root) => {
    if (root.dataset.wired) return;
    root.dataset.wired = '1';
    root.querySelectorAll('[data-magnet]').forEach((row) => {
      const box = row.querySelector('[aria-hidden]');
      let raf = 0, x = 0, y = 0;
      const write = () => {
        raf = 0;
        row.style.setProperty('--tcb26-dx', x.toFixed(1) + 'px');
        row.style.setProperty('--tcb26-dy', y.toFixed(1) + 'px');
      };
      row.addEventListener('pointermove', (e) => {
        const r = box.getBoundingClientRect();
        x = Math.max(-MAX, Math.min(MAX, (e.clientX - (r.left + r.width / 2)) / 3));
        y = Math.max(-MAX, Math.min(MAX, (e.clientY - (r.top + r.height / 2)) / 3));
        if (!raf) raf = requestAnimationFrame(write);
      });
      row.addEventListener('pointerleave', () => { x = 0; y = 0; if (!raf) raf = requestAnimationFrame(write); });
    });
  });
})();
```

How this works

Variables are the interface. JS sets --tcb26-dx/dy on the row; Tailwind's parenthesis syntax reads them as translate values. No class names or inline transforms from script.

Two layers. The box moves the full distance; the label moves half (translate-x-[calc(var(--tcb26-dx)/2)]), giving a subtle depth.

Cheap. pointermove can fire 120× a second; updates are coalesced into one write per animation frame.

Make it yours

  • Strength: MAX (max lean in px) and the /3 divisor.
  • Springiness: the ease-[cubic-bezier(.3,1.2,.4,1)] curve.
  • Label parallax off: remove the label's translate utilities.
  • Apply to buttons: the same variables work on any element.

Gotchas — read before shipping

  • Skip the effect on touch (hover:none) and for prefers-reduced-motion — the script checks both.
  • Magnetic motion must never move the hit target far — keep MAX small.
  • The script is idempotent via data-wired.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

The translate-x-(--var) syntax is Tailwind v4.0+.

Techniques used in this demo

Theme tokensset in @theme, used by a utility

custom propertiestw ↗

HTML & JSno Tailwind involved

pointer eventsMDN ↗request animation frameMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →