29 Tailwind CSS Checkboxes
22 / 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 Dark Mode Toggle Switch — Sun & Moon, No JavaScript

A day/night switch that actually changes the theme around it: has-checked: on the stage and group-has-checked/stage: on the card recolour the whole demo, while the thumb morphs from a glowing sun into a cratered moon over a star field. Zero JavaScript.

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-22 group/stage w-full min-h-svh grid place-items-center bg-tcb22-day px-5 py-14 font-tcb22-sans transition-colors duration-500 has-checked:bg-tcb22-night selection:bg-tcb22-sun selection:text-tcb22-ink motion-reduce:transition-none" aria-label="Dark mode toggle">
  <label class="group flex cursor-pointer items-center gap-6 rounded-2xl border border-tcb22-line bg-white px-6.5 py-5 shadow-tcb22-card transition-colors duration-500 group-has-checked/stage:border-white/10 group-has-checked/stage:bg-tcb22-card motion-reduce:transition-none">
    <span class="grid">
      <span class="text-base font-semibold text-tcb22-ink transition-colors group-has-checked/stage:text-white">Dark mode</span>
      <span class="text-[13px] text-tcb22-mut transition-colors group-has-checked/stage:text-tcb22-mutnight">Easier on the eyes at night</span>
    </span>
    <input type="checkbox" class="peer sr-only" checked>
    <span aria-hidden="true" class="relative h-9 w-[76px] flex-none overflow-hidden rounded-full bg-linear-to-b from-tcb22-sky1 to-tcb22-sky2 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb22-ring">
      <span class="absolute inset-0 bg-linear-to-b from-tcb22-sky3 to-tcb22-sky4 opacity-0 transition-opacity duration-500 group-has-checked:opacity-100"></span>
      <span class="absolute inset-0 bg-[radial-gradient(1.5px_1.5px_at_18px_12px,#fff_99%,transparent),radial-gradient(1.5px_1.5px_at_30px_24px,#fff_99%,transparent),radial-gradient(1px_1px_at_24px_8px,#fff_99%,transparent),radial-gradient(1.5px_1.5px_at_40px_16px,#fff_99%,transparent),radial-gradient(1px_1px_at_12px_26px,#fff_99%,transparent)] opacity-0 transition-opacity duration-500 group-has-checked:opacity-100"></span>
      <span class="absolute left-1 top-1 size-7 rounded-full bg-tcb22-sun shadow-tcb22-sun transition-[translate,background-color,box-shadow] duration-500 ease-[cubic-bezier(.4,.8,.3,1)] group-has-checked:translate-x-10 group-has-checked:bg-tcb22-moon group-has-checked:shadow-tcb22-moon motion-reduce:transition-none"></span>
    </span>
  </label>
</section>
@import "tailwindcss";

@theme {
  --color-tcb22-day: #e9edf3;
  --color-tcb22-day: oklch(0.94 0.01 255);
  --color-tcb22-night: #0f1424;
  --color-tcb22-night: oklch(0.18 0.035 270);
  --color-tcb22-card: #1a2136;
  --color-tcb22-card: oklch(0.24 0.04 270);
  --color-tcb22-line: #e0e5ec;
  --color-tcb22-line: oklch(0.92 0.01 255);
  --color-tcb22-ink: #2a3140;
  --color-tcb22-ink: oklch(0.3 0.025 260);
  --color-tcb22-mut: #5b6474;
  --color-tcb22-mut: oklch(0.49 0.025 260);
  --color-tcb22-mutnight: #a3adc4;
  --color-tcb22-mutnight: oklch(0.75 0.03 265);
  --color-tcb22-sky1: #7ec8ff;
  --color-tcb22-sky1: oklch(0.8 0.11 240);
  --color-tcb22-sky2: #cdeeff;
  --color-tcb22-sky2: oklch(0.93 0.05 225);
  --color-tcb22-sky3: #1b2542;
  --color-tcb22-sky3: oklch(0.25 0.05 270);
  --color-tcb22-sky4: #2a3766;
  --color-tcb22-sky4: oklch(0.33 0.08 270);
  --color-tcb22-sun: #ffd76b;
  --color-tcb22-sun: oklch(0.89 0.14 88);
  --color-tcb22-moon: #e6ecf5;
  --color-tcb22-moon: oklch(0.94 0.012 255);
  --color-tcb22-ring: #4d7fff;
  --color-tcb22-ring: oklch(0.62 0.2 265);
  --font-tcb22-sans: 'Outfit', system-ui, sans-serif;
  --shadow-tcb22-card: 0 18px 40px -30px rgb(16 24 40 / 0.5);
  --shadow-tcb22-sun: 0 0 10px rgb(255 200 60 / 0.9);
  --shadow-tcb22-moon: inset -8px 2px 0 0 #b9c4d6;
}
/* 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-22 {
  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-tcb22-day: #e9edf3;
  --color-tcb22-day: oklch(0.94 0.01 255);
  --color-tcb22-night: #0f1424;
  --color-tcb22-night: oklch(0.18 0.035 270);
  --color-tcb22-card: #1a2136;
  --color-tcb22-card: oklch(0.24 0.04 270);
  --color-tcb22-line: #e0e5ec;
  --color-tcb22-line: oklch(0.92 0.01 255);
  --color-tcb22-ink: #2a3140;
  --color-tcb22-ink: oklch(0.3 0.025 260);
  --color-tcb22-mut: #5b6474;
  --color-tcb22-mut: oklch(0.49 0.025 260);
  --color-tcb22-mutnight: #a3adc4;
  --color-tcb22-mutnight: oklch(0.75 0.03 265);
  --color-tcb22-sky1: #7ec8ff;
  --color-tcb22-sky1: oklch(0.8 0.11 240);
  --color-tcb22-sky2: #cdeeff;
  --color-tcb22-sky2: oklch(0.93 0.05 225);
  --color-tcb22-sky3: #1b2542;
  --color-tcb22-sky3: oklch(0.25 0.05 270);
  --color-tcb22-sky4: #2a3766;
  --color-tcb22-sky4: oklch(0.33 0.08 270);
  --color-tcb22-sun: #ffd76b;
  --color-tcb22-sun: oklch(0.89 0.14 88);
  --color-tcb22-moon: #e6ecf5;
  --color-tcb22-moon: oklch(0.94 0.012 255);
  --color-tcb22-ring: #4d7fff;
  --color-tcb22-ring: oklch(0.62 0.2 265);
  --font-tcb22-sans: 'Outfit', system-ui, sans-serif;
  --shadow-tcb22-card: 0 18px 40px -30px rgb(16 24 40 / 0.5);
  --shadow-tcb22-sun: 0 0 10px rgb(255 200 60 / 0.9);
  --shadow-tcb22-moon: inset -8px 2px 0 0 #b9c4d6;
}
/* 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-22 {
  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=Outfit:wght@400;500;600;700&display=swap">

What changed in the port

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

  • input:checked ~ .track .thumb became group-has-checked:; the track's gradient swap became a cross-fading overlay, because gradients don't interpolate.
  • The star field's four radial-gradient()s became one arbitrary bg-[…] with underscores for spaces.
  • UI upgrade from the CSS original: the switch now themes its stage — page, card and text all flip to night via has-checked: and a named group/stage. The original moved a thumb and changed nothing else.
  • UI upgrade: a supporting sub-label, a fifth star, and the sky now truly cross-fades instead of snapping.
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 Dark Mode Toggle Switch — Sun & Moon, No JavaScript
Source: https://codefronts.com/components/tailwind-css-checkboxes/tailwind-dark-mode-toggle-sun-moon/

A day/night switch that actually changes the theme around it: has-checked: on the stage and group-has-checked/stage: on the card recolour the whole demo, while the thumb morphs from a glowing sun into a cratered moon over a star field. Zero JavaScript.
## HTML
```html
<section class="tcb-22 group/stage w-full min-h-svh grid place-items-center bg-tcb22-day px-5 py-14 font-tcb22-sans transition-colors duration-500 has-checked:bg-tcb22-night selection:bg-tcb22-sun selection:text-tcb22-ink motion-reduce:transition-none" aria-label="Dark mode toggle">
  <label class="group flex cursor-pointer items-center gap-6 rounded-2xl border border-tcb22-line bg-white px-6.5 py-5 shadow-tcb22-card transition-colors duration-500 group-has-checked/stage:border-white/10 group-has-checked/stage:bg-tcb22-card motion-reduce:transition-none">
    <span class="grid">
      <span class="text-base font-semibold text-tcb22-ink transition-colors group-has-checked/stage:text-white">Dark mode</span>
      <span class="text-[13px] text-tcb22-mut transition-colors group-has-checked/stage:text-tcb22-mutnight">Easier on the eyes at night</span>
    </span>
    <input type="checkbox" class="peer sr-only" checked>
    <span aria-hidden="true" class="relative h-9 w-[76px] flex-none overflow-hidden rounded-full bg-linear-to-b from-tcb22-sky1 to-tcb22-sky2 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb22-ring">
      <span class="absolute inset-0 bg-linear-to-b from-tcb22-sky3 to-tcb22-sky4 opacity-0 transition-opacity duration-500 group-has-checked:opacity-100"></span>
      <span class="absolute inset-0 bg-[radial-gradient(1.5px_1.5px_at_18px_12px,#fff_99%,transparent),radial-gradient(1.5px_1.5px_at_30px_24px,#fff_99%,transparent),radial-gradient(1px_1px_at_24px_8px,#fff_99%,transparent),radial-gradient(1.5px_1.5px_at_40px_16px,#fff_99%,transparent),radial-gradient(1px_1px_at_12px_26px,#fff_99%,transparent)] opacity-0 transition-opacity duration-500 group-has-checked:opacity-100"></span>
      <span class="absolute left-1 top-1 size-7 rounded-full bg-tcb22-sun shadow-tcb22-sun transition-[translate,background-color,box-shadow] duration-500 ease-[cubic-bezier(.4,.8,.3,1)] group-has-checked:translate-x-10 group-has-checked:bg-tcb22-moon group-has-checked:shadow-tcb22-moon motion-reduce:transition-none"></span>
    </span>
  </label>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb22-day: #e9edf3;
  --color-tcb22-day: oklch(0.94 0.01 255);
  --color-tcb22-night: #0f1424;
  --color-tcb22-night: oklch(0.18 0.035 270);
  --color-tcb22-card: #1a2136;
  --color-tcb22-card: oklch(0.24 0.04 270);
  --color-tcb22-line: #e0e5ec;
  --color-tcb22-line: oklch(0.92 0.01 255);
  --color-tcb22-ink: #2a3140;
  --color-tcb22-ink: oklch(0.3 0.025 260);
  --color-tcb22-mut: #5b6474;
  --color-tcb22-mut: oklch(0.49 0.025 260);
  --color-tcb22-mutnight: #a3adc4;
  --color-tcb22-mutnight: oklch(0.75 0.03 265);
  --color-tcb22-sky1: #7ec8ff;
  --color-tcb22-sky1: oklch(0.8 0.11 240);
  --color-tcb22-sky2: #cdeeff;
  --color-tcb22-sky2: oklch(0.93 0.05 225);
  --color-tcb22-sky3: #1b2542;
  --color-tcb22-sky3: oklch(0.25 0.05 270);
  --color-tcb22-sky4: #2a3766;
  --color-tcb22-sky4: oklch(0.33 0.08 270);
  --color-tcb22-sun: #ffd76b;
  --color-tcb22-sun: oklch(0.89 0.14 88);
  --color-tcb22-moon: #e6ecf5;
  --color-tcb22-moon: oklch(0.94 0.012 255);
  --color-tcb22-ring: #4d7fff;
  --color-tcb22-ring: oklch(0.62 0.2 265);
  --font-tcb22-sans: 'Outfit', system-ui, sans-serif;
  --shadow-tcb22-card: 0 18px 40px -30px rgb(16 24 40 / 0.5);
  --shadow-tcb22-sun: 0 0 10px rgb(255 200 60 / 0.9);
  --shadow-tcb22-moon: inset -8px 2px 0 0 #b9c4d6;
}
/* 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-22 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

State can flow up. Because :has() lets an ancestor read the checkbox, the section itself carries has-checked:bg-tcb22-night, and a named group (group/stage) lets the card and text restyle too. For a site-wide toggle, put the same variant on <html> via @custom-variant dark (&:where(:root:has(#theme:checked) *)).

The moon is a shadow. A large inset shadow in the moon's shade, offset left, leaves a crescent of light — no extra element.

Make it yours

  • Site-wide: define @custom-variant dark keyed to the toggle and use dark: everywhere.
  • Persist: a 3-line script can save checked to localStorage.
  • System default: initialise checked from prefers-color-scheme.
  • More stars: add radial gradients to the arbitrary background.

Gotchas — read before shipping

  • Without JS the choice isn't remembered across pages.
  • Transitioning background-image gradients doesn't interpolate — the track cross-fades via its star layer instead.
  • Keep the label text inside the themed card so its contrast flips with the background.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() for page theming needs Firefox 121+; older engines still flip the switch.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗radial-gradient()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →