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

Accessible Custom Checkbox in Tailwind CSS — WCAG Focus Ring

The reference implementation for keyboard users: a double focus ring (white gap + 3px blue) that only appears for keyboard focus via peer-focus-visible:, a disabled row that stays legible instead of fading to 50% opacity, and a described-by hint so screen readers explain why it's disabled.

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-06 w-full min-h-svh grid place-items-center bg-tcb06-bg px-5 py-14 font-tcb06-sans text-tcb06-ink selection:bg-tcb06-ring selection:text-white" aria-label="Accessible checkbox group">
  <fieldset class="w-full max-w-[26rem] rounded-2xl border border-tcb06-line bg-white px-5 pb-4 pt-3">
    <legend class="px-1 text-xs font-bold uppercase tracking-[0.12em] text-tcb06-mut">Notification preferences</legend>
    <label class="group flex min-h-11 cursor-pointer items-center gap-3.5 text-[15px]"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb06-box bg-white text-white transition-colors duration-150 group-hover:border-tcb06-acc peer-checked:border-tcb06-acc peer-checked:bg-tcb06-acc peer-focus-visible:ring-3 peer-focus-visible:ring-tcb06-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white motion-reduce:transition-none"><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-150 ease-[cubic-bezier(.2,.9,.3,1.2)] group-has-checked:scale-100 group-has-checked:opacity-100 motion-reduce:transition-none"><path d="M20 6 9 17l-5-5"/></svg></span>Enable desktop alerts</label>
    <label class="group flex min-h-11 cursor-pointer items-center gap-3.5 text-[15px]"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb06-box bg-white text-white transition-colors duration-150 group-hover:border-tcb06-acc peer-checked:border-tcb06-acc peer-checked:bg-tcb06-acc peer-focus-visible:ring-3 peer-focus-visible:ring-tcb06-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white motion-reduce:transition-none"><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-150 ease-[cubic-bezier(.2,.9,.3,1.2)] group-has-checked:scale-100 group-has-checked:opacity-100 motion-reduce:transition-none"><path d="M20 6 9 17l-5-5"/></svg></span>Play a sound on mention</label>
    <label class="group flex min-h-11 cursor-pointer items-center gap-3.5 text-[15px]"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb06-box bg-white text-white transition-colors duration-150 group-hover:border-tcb06-acc peer-checked:border-tcb06-acc peer-checked:bg-tcb06-acc peer-focus-visible:ring-3 peer-focus-visible:ring-tcb06-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white motion-reduce:transition-none"><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-150 ease-[cubic-bezier(.2,.9,.3,1.2)] group-has-checked:scale-100 group-has-checked:opacity-100 motion-reduce:transition-none"><path d="M20 6 9 17l-5-5"/></svg></span>Weekly summary email</label>
    <label class="group flex min-h-11 cursor-not-allowed items-center gap-3.5 text-[15px] text-tcb06-dis"><input type="checkbox" class="peer sr-only" disabled aria-describedby="tcb06-hint"><span aria-hidden="true" class="size-[22px] flex-none rounded-md border-2 border-dashed border-tcb06-disline bg-tcb06-disbg"></span><span>SMS alerts <span id="tcb06-hint" class="text-[13px]">— upgrade to Pro to enable</span></span></label>
  </fieldset>
</section>
@import "tailwindcss";

@theme {
  --color-tcb06-bg: #fbfbfc;
  --color-tcb06-bg: oklch(0.988 0.002 265);
  --color-tcb06-ink: #2a2f3a;
  --color-tcb06-ink: oklch(0.3 0.02 265);
  --color-tcb06-mut: #636a76;
  --color-tcb06-mut: oklch(0.51 0.02 265);
  --color-tcb06-line: #e6e7ea;
  --color-tcb06-line: oklch(0.925 0.005 265);
  --color-tcb06-box: #8f96a3;
  --color-tcb06-box: oklch(0.67 0.02 265);
  --color-tcb06-acc: #2b303b;
  --color-tcb06-acc: oklch(0.3 0.02 262);
  --color-tcb06-ring: #2f7de1;
  --color-tcb06-ring: oklch(0.6 0.17 255);
  --color-tcb06-dis: #6b7280;
  --color-tcb06-dis: oklch(0.55 0.02 265);
  --color-tcb06-disline: #c9ccd3;
  --color-tcb06-disline: oklch(0.84 0.01 265);
  --color-tcb06-disbg: #f3f4f6;
  --color-tcb06-disbg: oklch(0.967 0.003 265);
  --font-tcb06-sans: 'Instrument Sans', 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-06 {
  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-tcb06-bg: #fbfbfc;
  --color-tcb06-bg: oklch(0.988 0.002 265);
  --color-tcb06-ink: #2a2f3a;
  --color-tcb06-ink: oklch(0.3 0.02 265);
  --color-tcb06-mut: #636a76;
  --color-tcb06-mut: oklch(0.51 0.02 265);
  --color-tcb06-line: #e6e7ea;
  --color-tcb06-line: oklch(0.925 0.005 265);
  --color-tcb06-box: #8f96a3;
  --color-tcb06-box: oklch(0.67 0.02 265);
  --color-tcb06-acc: #2b303b;
  --color-tcb06-acc: oklch(0.3 0.02 262);
  --color-tcb06-ring: #2f7de1;
  --color-tcb06-ring: oklch(0.6 0.17 255);
  --color-tcb06-dis: #6b7280;
  --color-tcb06-dis: oklch(0.55 0.02 265);
  --color-tcb06-disline: #c9ccd3;
  --color-tcb06-disline: oklch(0.84 0.01 265);
  --color-tcb06-disbg: #f3f4f6;
  --color-tcb06-disbg: oklch(0.967 0.003 265);
  --font-tcb06-sans: 'Instrument Sans', 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-06 {
  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&display=swap">

What changed in the port

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

  • input:focus-visible ~ .box{outline:…} + the :focus:not(:focus-visible) reset collapsed into one peer-focus-visible: ring.
  • .cb-06__row--disabled{opacity:.5} became explicit tokens on a row whose box is a dashed, non-interactive placeholder.
  • UI upgrade from the CSS original: the focus ring is now two-tone (white offset + blue), so it clears 3:1 against both empty and filled boxes; the empty-box border rose from #b8bcc4 (1.9:1) to 3.1:1 — WCAG 1.4.11 non-text contrast.
  • UI upgrade: the disabled row went from 2.6:1 to 4.8:1 and explains itself through aria-describedby; the legend rose from 2.6:1 to 5.4: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: Accessible Custom Checkbox in Tailwind CSS — WCAG Focus Ring
Source: https://codefronts.com/components/tailwind-css-checkboxes/accessible-custom-checkbox-tailwind-focus-ring/

The reference implementation for keyboard users: a double focus ring (white gap + 3px blue) that only appears for keyboard focus via peer-focus-visible:, a disabled row that stays legible instead of fading to 50% opacity, and a described-by hint so screen readers explain why it's disabled.
## HTML
```html
<section class="tcb-06 w-full min-h-svh grid place-items-center bg-tcb06-bg px-5 py-14 font-tcb06-sans text-tcb06-ink selection:bg-tcb06-ring selection:text-white" aria-label="Accessible checkbox group">
  <fieldset class="w-full max-w-[26rem] rounded-2xl border border-tcb06-line bg-white px-5 pb-4 pt-3">
    <legend class="px-1 text-xs font-bold uppercase tracking-[0.12em] text-tcb06-mut">Notification preferences</legend>
    <label class="group flex min-h-11 cursor-pointer items-center gap-3.5 text-[15px]"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb06-box bg-white text-white transition-colors duration-150 group-hover:border-tcb06-acc peer-checked:border-tcb06-acc peer-checked:bg-tcb06-acc peer-focus-visible:ring-3 peer-focus-visible:ring-tcb06-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white motion-reduce:transition-none"><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-150 ease-[cubic-bezier(.2,.9,.3,1.2)] group-has-checked:scale-100 group-has-checked:opacity-100 motion-reduce:transition-none"><path d="M20 6 9 17l-5-5"/></svg></span>Enable desktop alerts</label>
    <label class="group flex min-h-11 cursor-pointer items-center gap-3.5 text-[15px]"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb06-box bg-white text-white transition-colors duration-150 group-hover:border-tcb06-acc peer-checked:border-tcb06-acc peer-checked:bg-tcb06-acc peer-focus-visible:ring-3 peer-focus-visible:ring-tcb06-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white motion-reduce:transition-none"><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-150 ease-[cubic-bezier(.2,.9,.3,1.2)] group-has-checked:scale-100 group-has-checked:opacity-100 motion-reduce:transition-none"><path d="M20 6 9 17l-5-5"/></svg></span>Play a sound on mention</label>
    <label class="group flex min-h-11 cursor-pointer items-center gap-3.5 text-[15px]"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-[22px] flex-none place-items-center rounded-md border-2 border-tcb06-box bg-white text-white transition-colors duration-150 group-hover:border-tcb06-acc peer-checked:border-tcb06-acc peer-checked:bg-tcb06-acc peer-focus-visible:ring-3 peer-focus-visible:ring-tcb06-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white motion-reduce:transition-none"><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-150 ease-[cubic-bezier(.2,.9,.3,1.2)] group-has-checked:scale-100 group-has-checked:opacity-100 motion-reduce:transition-none"><path d="M20 6 9 17l-5-5"/></svg></span>Weekly summary email</label>
    <label class="group flex min-h-11 cursor-not-allowed items-center gap-3.5 text-[15px] text-tcb06-dis"><input type="checkbox" class="peer sr-only" disabled aria-describedby="tcb06-hint"><span aria-hidden="true" class="size-[22px] flex-none rounded-md border-2 border-dashed border-tcb06-disline bg-tcb06-disbg"></span><span>SMS alerts <span id="tcb06-hint" class="text-[13px]">— upgrade to Pro to enable</span></span></label>
  </fieldset>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb06-bg: #fbfbfc;
  --color-tcb06-bg: oklch(0.988 0.002 265);
  --color-tcb06-ink: #2a2f3a;
  --color-tcb06-ink: oklch(0.3 0.02 265);
  --color-tcb06-mut: #636a76;
  --color-tcb06-mut: oklch(0.51 0.02 265);
  --color-tcb06-line: #e6e7ea;
  --color-tcb06-line: oklch(0.925 0.005 265);
  --color-tcb06-box: #8f96a3;
  --color-tcb06-box: oklch(0.67 0.02 265);
  --color-tcb06-acc: #2b303b;
  --color-tcb06-acc: oklch(0.3 0.02 262);
  --color-tcb06-ring: #2f7de1;
  --color-tcb06-ring: oklch(0.6 0.17 255);
  --color-tcb06-dis: #6b7280;
  --color-tcb06-dis: oklch(0.55 0.02 265);
  --color-tcb06-disline: #c9ccd3;
  --color-tcb06-disline: oklch(0.84 0.01 265);
  --color-tcb06-disbg: #f3f4f6;
  --color-tcb06-disbg: oklch(0.967 0.003 265);
  --font-tcb06-sans: 'Instrument Sans', 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-06 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Focus without flashing. :focus-visible matches keyboard focus but not mouse clicks, so the original's :focus:not(:focus-visible){outline:none} reset is unnecessary — Tailwind's variant already implies it.

A ring that works everywhere. ring-offset-2 ring-offset-white paints a white gap between box and ring, so the ring clears WCAG 2.2's 3:1 focus-appearance contrast whether the box is empty or filled.

Disabled but readable. Instead of opacity-50 on the row (which dropped the text to 2.6:1), the box and text take explicit disabled tokens, and the reason is exposed via aria-describedby.

Make it yours

  • Brand ring: change --color-tcb06-ring; keep ≥3:1 against the page.
  • Larger boxes for touch: size-6 and pointer-coarse:size-7.
  • Error state: aria-invalid: variant on the input with a red ring and a described error.
  • Dark surface: set ring-offset-* to the panel colour.

Gotchas — read before shipping

  • Never style :focus alone — mouse users would see rings on every click.
  • disabled inputs are skipped by Tab; if users must discover the option, use aria-disabled="true" and block the change in JS instead.
  • Ring utilities are box-shadows — they don't follow outline-offset; use ring-offset-*.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:focus-visible is Baseline since 2022 (Safari 15.4).

Techniques used in this demo

Utilitiesfirst-class utility or variant

:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →