47 Tailwind CSS Toggles & Switches
13 / 47

All 47 in 47 Tailwind CSS Toggles & Switches

  1. 01Tailwind iOS-Style Toggle Switch with appearance-none
  2. 02Tailwind Dark Mode Sun / Moon Theme Switcher
  3. 03Tailwind Neumorphic Soft-UI Pill Toggle
  4. 04Tailwind Gooey Liquid Morphing Switch with SVG Filter
  5. 05Tailwind Bouncy Elastic Physics Toggle (Overshoot Cubic-Bezier)
  6. 06Tailwind ON / OFF Text Switch with Labels Inside the Track
  7. 07Tailwind SaaS Pricing Toggle — Monthly / Annually Segmented Pill
  8. 08Tailwind Mechanical Keycap Toggles with Haptic Feedback
  9. 09Tailwind Waveform Mute Toggle with Animated EQ Bars
  10. 10Tailwind Timed Auto-Off Toggle with Conic Countdown Ring
  11. 11Tailwind Press-and-Hold to Confirm Toggle (Fingerprint Scan)
  12. 12Tailwind Split-Flap Departure Board Toggle (3D Flip)
  13. 13Tailwind Permission Toggle Group with :has() Live Status Badge
  14. 14Tailwind Material Design 3 Switch with State Layer
  15. 15Tailwind Skeuomorphic Wall Light Switch with Room Relight
  16. 16Tailwind Neon Cyberpunk Toggle with Clipped Corners
  17. 17Tailwind Brutalist Snap Toggle with Hard Offset Shadow
  18. 18Tailwind Day / Night Landscape Scene Switch
  19. 19Tailwind 3D Flip Card Toggle (rotateY Switch)
  20. 20Tailwind Sliding Pill Toggle with Label Inside the Thumb
  21. 21Tailwind Glassmorphism Frosted Toggle with backdrop-blur
  22. 22Tailwind Rotary Knob Toggle with Brushed-Metal Conic Gradient
  23. 23Tailwind iOS Settings List with Grouped Toggle Rows
  24. 24Tailwind Minimal Outline Toggle Drawn in currentColor
  25. 25Tailwind Squash-and-Stretch Pebble Toggle
  26. 26Tailwind Industrial Rocker I/O Power Switch
  27. 27Tailwind Accessible role=switch Toggle with forced-colors Support
  28. 28Tailwind Macro-Pad Toggle Grid with RGB Underglow
  29. 29Tailwind Radial VU Meter Mute Toggle
  30. 30Tailwind Segmented Pip Countdown Auto-Off Toggle
  31. 31Tailwind Slide-to-Confirm Toggle Rail (Drag or Arrow Keys)
  32. 32Tailwind Odometer Roll ON / OFF Toggle
  33. 33Tailwind Master Toggle with Indeterminate Tri-State
  34. 34Tailwind iOS Control Centre Tile Toggles
  35. 35Tailwind Material 3 Connected Icon Toggle Buttons
  36. 36Tailwind Two-Gang Wall Plate with Cumulative Room Light
  37. 37Tailwind Neon Toggle with Animated Conic Border Light
  38. 38Tailwind Brutalist Rubber-Stamp Toggle
  39. 39Tailwind Aurora Night Sky Toggle Switch
  40. 40Tailwind 3D Rotating Cube Toggle
  41. 41Tailwind Three-Position Off / Auto / On Selector
  42. 42Tailwind Liquid Glass Toggle with Specular Highlight
  43. 43Tailwind Three-Detent Rotary Selector Knob
  44. 44Tailwind Hardware Slide Switch with Knurled Grip
  45. 45Tailwind Battery Saver Toggle with Live Fill Meter
  46. 46Tailwind Morphing Sun-to-Moon Icon Toggle (SVG Stroke)
  47. 47Tailwind Guarded Kill Switch Under a Flip-Up Safety Cover
Pure TailwindMIT licensed

Tailwind Permission Toggle Group with :has() Live Status Badge

A settings card that reads its own children: a stack of permission rows, and a header badge that flips between Full access, Partial and No access purely by watching the group with :has(). This is the modern replacement for the classic "JavaScript counts the checkboxes" widget — a state machine that cannot desync from the DOM.

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="ttg-13 w-full min-h-svh grid place-items-center px-5 py-14 bg-ttg13-bg font-ttg13-sans" aria-label="Permission toggles with live status">
  <div class="w-[min(380px,100%)] rounded-[20px] bg-white overflow-hidden shadow-[0_24px_50px_-34px_oklch(0.4_0.04_265/0.6)] border border-ttg13-hair not-has-[input:not(:checked)]:[&_.ttg13-full]:inline-block has-[input:not(:checked)]:has-[input:checked]:[&_.ttg13-part]:inline-block not-has-[input:checked]:[&_.ttg13-none]:inline-block">
    <header class="flex items-center justify-between gap-4 px-5 py-4 border-b border-ttg13-hair">
      <b class="text-[16px] font-bold text-ttg13-ink">App permissions</b>
      <span aria-hidden="true" class="relative text-[11.5px] font-extrabold tracking-[0.04em]">
        <i class="ttg13-full not-italic hidden px-2.5 py-1 rounded-full bg-ttg13-okbg text-ttg13-okink">Full access</i>
        <i class="ttg13-part not-italic hidden px-2.5 py-1 rounded-full bg-ttg13-warnbg text-ttg13-warnink">Partial</i>
        <i class="ttg13-none not-italic hidden px-2.5 py-1 rounded-full bg-ttg13-offbg text-ttg13-offink">No access</i>
      </span>
    </header>
    <label class="flex items-center gap-5 min-h-16 px-5 py-3.5 cursor-pointer transition-colors duration-200 hover:bg-ttg13-tint has-checked:[&_.ttg13-t]:text-ttg13-ink">
      <span class="flex-1 flex flex-col gap-0.5">
        <b class="ttg13-t text-[14.5px] font-semibold text-ttg13-dim transition-colors duration-200">Camera</b>
        <small class="text-[12px] text-ttg13-mute">Photos &amp; video capture</small>
      </span>
      <input type="checkbox" role="switch" checked aria-label="Camera" class="appearance-none shrink-0 w-11 h-6.5 rounded-full bg-ttg13-trackoff relative cursor-pointer transition-colors duration-250 before:content-[''] before:absolute before:top-0.5 before:left-0.5 before:w-[22px] before:h-[22px] before:rounded-full before:bg-white before:shadow-[0_2px_5px_oklch(0.3_0.03_265/0.3)] before:transition-transform before:duration-250 before:ease-[cubic-bezier(0.25,0.9,0.3,1.1)] checked:bg-ttg13-on checked:before:translate-x-[18px] focus-visible:outline-3 focus-visible:outline-ttg13-focus focus-visible:outline-offset-2 motion-reduce:transition-none motion-reduce:before:transition-none">
    </label>
    <label class="flex items-center gap-5 min-h-16 px-5 py-3.5 cursor-pointer border-t border-ttg13-hair transition-colors duration-200 hover:bg-ttg13-tint has-checked:[&_.ttg13-t]:text-ttg13-ink">
      <span class="flex-1 flex flex-col gap-0.5">
        <b class="ttg13-t text-[14.5px] font-semibold text-ttg13-dim transition-colors duration-200">Microphone</b>
        <small class="text-[12px] text-ttg13-mute">Voice notes &amp; calls</small>
      </span>
      <input type="checkbox" role="switch" checked aria-label="Microphone" class="appearance-none shrink-0 w-11 h-6.5 rounded-full bg-ttg13-trackoff relative cursor-pointer transition-colors duration-250 before:content-[''] before:absolute before:top-0.5 before:left-0.5 before:w-[22px] before:h-[22px] before:rounded-full before:bg-white before:shadow-[0_2px_5px_oklch(0.3_0.03_265/0.3)] before:transition-transform before:duration-250 before:ease-[cubic-bezier(0.25,0.9,0.3,1.1)] checked:bg-ttg13-on checked:before:translate-x-[18px] focus-visible:outline-3 focus-visible:outline-ttg13-focus focus-visible:outline-offset-2 motion-reduce:transition-none motion-reduce:before:transition-none">
    </label>
    <label class="flex items-center gap-5 min-h-16 px-5 py-3.5 cursor-pointer border-t border-ttg13-hair transition-colors duration-200 hover:bg-ttg13-tint has-checked:[&_.ttg13-t]:text-ttg13-ink">
      <span class="flex-1 flex flex-col gap-0.5">
        <b class="ttg13-t text-[14.5px] font-semibold text-ttg13-dim transition-colors duration-200">Location</b>
        <small class="text-[12px] text-ttg13-mute">While using the app</small>
      </span>
      <input type="checkbox" role="switch" aria-label="Location" class="appearance-none shrink-0 w-11 h-6.5 rounded-full bg-ttg13-trackoff relative cursor-pointer transition-colors duration-250 before:content-[''] before:absolute before:top-0.5 before:left-0.5 before:w-[22px] before:h-[22px] before:rounded-full before:bg-white before:shadow-[0_2px_5px_oklch(0.3_0.03_265/0.3)] before:transition-transform before:duration-250 before:ease-[cubic-bezier(0.25,0.9,0.3,1.1)] checked:bg-ttg13-on checked:before:translate-x-[18px] focus-visible:outline-3 focus-visible:outline-ttg13-focus focus-visible:outline-offset-2 motion-reduce:transition-none motion-reduce:before:transition-none">
    </label>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-ttg13-bg: #eceef4;
  --color-ttg13-bg: oklch(0.95 0.008 265);
  --color-ttg13-hair: #eaecf2;
  --color-ttg13-hair: oklch(0.94 0.006 265);
  --color-ttg13-tint: #f7f8fc;
  --color-ttg13-tint: oklch(0.98 0.004 265);
  --color-ttg13-ink: #1f2532;
  --color-ttg13-ink: oklch(0.26 0.015 265);
  --color-ttg13-dim: #737b8d;
  --color-ttg13-dim: oklch(0.58 0.018 265);
  --color-ttg13-mute: #8f97a7;
  --color-ttg13-mute: oklch(0.65 0.015 265);
  --color-ttg13-trackoff: #dfe2ea;
  --color-ttg13-trackoff: oklch(0.9 0.008 265);
  --color-ttg13-on: #2f9e63;
  --color-ttg13-on: oklch(0.63 0.16 155);
  --color-ttg13-okbg: #d4f2e0;
  --color-ttg13-okbg: oklch(0.92 0.07 155);
  --color-ttg13-okink: #1d6944;
  --color-ttg13-okink: oklch(0.44 0.11 155);
  --color-ttg13-warnbg: #fbeccd;
  --color-ttg13-warnbg: oklch(0.93 0.07 80);
  --color-ttg13-warnink: #7a5410;
  --color-ttg13-warnink: oklch(0.48 0.1 70);
  --color-ttg13-offbg: #e9ebf1;
  --color-ttg13-offbg: oklch(0.93 0.006 265);
  --color-ttg13-offink: #5d6478;
  --color-ttg13-offink: oklch(0.5 0.02 265);
  --color-ttg13-focus: #3f63e0;
  --color-ttg13-focus: oklch(0.55 0.19 265);
  --font-ttg13-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-13 {
  width: 100%;
  min-height: 100svh;
}

.ttg-13 input[type="checkbox"] {
  -webkit-appearance: none;
}

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-ttg13-bg: #eceef4;
  --color-ttg13-bg: oklch(0.95 0.008 265);
  --color-ttg13-hair: #eaecf2;
  --color-ttg13-hair: oklch(0.94 0.006 265);
  --color-ttg13-tint: #f7f8fc;
  --color-ttg13-tint: oklch(0.98 0.004 265);
  --color-ttg13-ink: #1f2532;
  --color-ttg13-ink: oklch(0.26 0.015 265);
  --color-ttg13-dim: #737b8d;
  --color-ttg13-dim: oklch(0.58 0.018 265);
  --color-ttg13-mute: #8f97a7;
  --color-ttg13-mute: oklch(0.65 0.015 265);
  --color-ttg13-trackoff: #dfe2ea;
  --color-ttg13-trackoff: oklch(0.9 0.008 265);
  --color-ttg13-on: #2f9e63;
  --color-ttg13-on: oklch(0.63 0.16 155);
  --color-ttg13-okbg: #d4f2e0;
  --color-ttg13-okbg: oklch(0.92 0.07 155);
  --color-ttg13-okink: #1d6944;
  --color-ttg13-okink: oklch(0.44 0.11 155);
  --color-ttg13-warnbg: #fbeccd;
  --color-ttg13-warnbg: oklch(0.93 0.07 80);
  --color-ttg13-warnink: #7a5410;
  --color-ttg13-warnink: oklch(0.48 0.1 70);
  --color-ttg13-offbg: #e9ebf1;
  --color-ttg13-offbg: oklch(0.93 0.006 265);
  --color-ttg13-offink: #5d6478;
  --color-ttg13-offink: oklch(0.5 0.02 265);
  --color-ttg13-focus: #3f63e0;
  --color-ttg13-focus: oklch(0.55 0.19 265);
  --font-ttg13-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-13 {
  width: 100%;
  min-height: 100svh;
}

.ttg-13 input[type="checkbox"] {
  -webkit-appearance: none;
}
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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap">

What changed in the port

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

  • Two traps sit in this one class list. First, has-[:not(:checked)] matches ANY descendant that is not a checked input — every div, span and label qualifies — so the condition is permanently true; it must be scoped as has-[input:not(:checked)]. Second, Tailwind sorts generated rules by utility, not by authoring order, so three badge states cannot rely on source order to resolve: each is written as a mutually exclusive condition (not-has-[input:not(:checked)] = all on, has-[input:not(:checked)]:has-[input:checked] = mixed, not-has-[input:checked] = all off) and all three badges default to hidden.
  • The badge rules live on the card rather than on each badge, because the condition is about the card's contents. Tailwind's arbitrary descendant syntax ([&_.ttg13-full]:hidden) keeps the relationship in one place instead of three.
  • Row titles use has-checked: on the label, which is a genuinely better expression than the original's label:has(:checked) .txt b — same selector, stated on the element that owns both.
  • UI change from the CSS original: rows grew to a 64px minimum (from 52px), the off-state title ink lifted to oklch(0.58) so a disabled permission is still readable at 4.6:1, and all three badge pairs were re-mixed to clear 4.5:1 — the amber Partial badge was previously 3.1:1, which is exactly the badge you most need to read.
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 Permission Toggle Group with :has() Live Status Badge
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-permission-toggle-group-has-live-status-badge/

A settings card that reads its own children: a stack of permission rows, and a header badge that flips between Full access, Partial and No access purely by watching the group with :has(). This is the modern replacement for the classic "JavaScript counts the checkboxes" widget &mdash; a state machine that cannot desync from the DOM.
## HTML
```html
<section class="ttg-13 w-full min-h-svh grid place-items-center px-5 py-14 bg-ttg13-bg font-ttg13-sans" aria-label="Permission toggles with live status">
  <div class="w-[min(380px,100%)] rounded-[20px] bg-white overflow-hidden shadow-[0_24px_50px_-34px_oklch(0.4_0.04_265/0.6)] border border-ttg13-hair not-has-[input:not(:checked)]:[&_.ttg13-full]:inline-block has-[input:not(:checked)]:has-[input:checked]:[&_.ttg13-part]:inline-block not-has-[input:checked]:[&_.ttg13-none]:inline-block">
    <header class="flex items-center justify-between gap-4 px-5 py-4 border-b border-ttg13-hair">
      <b class="text-[16px] font-bold text-ttg13-ink">App permissions</b>
      <span aria-hidden="true" class="relative text-[11.5px] font-extrabold tracking-[0.04em]">
        <i class="ttg13-full not-italic hidden px-2.5 py-1 rounded-full bg-ttg13-okbg text-ttg13-okink">Full access</i>
        <i class="ttg13-part not-italic hidden px-2.5 py-1 rounded-full bg-ttg13-warnbg text-ttg13-warnink">Partial</i>
        <i class="ttg13-none not-italic hidden px-2.5 py-1 rounded-full bg-ttg13-offbg text-ttg13-offink">No access</i>
      </span>
    </header>
    <label class="flex items-center gap-5 min-h-16 px-5 py-3.5 cursor-pointer transition-colors duration-200 hover:bg-ttg13-tint has-checked:[&_.ttg13-t]:text-ttg13-ink">
      <span class="flex-1 flex flex-col gap-0.5">
        <b class="ttg13-t text-[14.5px] font-semibold text-ttg13-dim transition-colors duration-200">Camera</b>
        <small class="text-[12px] text-ttg13-mute">Photos &amp; video capture</small>
      </span>
      <input type="checkbox" role="switch" checked aria-label="Camera" class="appearance-none shrink-0 w-11 h-6.5 rounded-full bg-ttg13-trackoff relative cursor-pointer transition-colors duration-250 before:content-[''] before:absolute before:top-0.5 before:left-0.5 before:w-[22px] before:h-[22px] before:rounded-full before:bg-white before:shadow-[0_2px_5px_oklch(0.3_0.03_265/0.3)] before:transition-transform before:duration-250 before:ease-[cubic-bezier(0.25,0.9,0.3,1.1)] checked:bg-ttg13-on checked:before:translate-x-[18px] focus-visible:outline-3 focus-visible:outline-ttg13-focus focus-visible:outline-offset-2 motion-reduce:transition-none motion-reduce:before:transition-none">
    </label>
    <label class="flex items-center gap-5 min-h-16 px-5 py-3.5 cursor-pointer border-t border-ttg13-hair transition-colors duration-200 hover:bg-ttg13-tint has-checked:[&_.ttg13-t]:text-ttg13-ink">
      <span class="flex-1 flex flex-col gap-0.5">
        <b class="ttg13-t text-[14.5px] font-semibold text-ttg13-dim transition-colors duration-200">Microphone</b>
        <small class="text-[12px] text-ttg13-mute">Voice notes &amp; calls</small>
      </span>
      <input type="checkbox" role="switch" checked aria-label="Microphone" class="appearance-none shrink-0 w-11 h-6.5 rounded-full bg-ttg13-trackoff relative cursor-pointer transition-colors duration-250 before:content-[''] before:absolute before:top-0.5 before:left-0.5 before:w-[22px] before:h-[22px] before:rounded-full before:bg-white before:shadow-[0_2px_5px_oklch(0.3_0.03_265/0.3)] before:transition-transform before:duration-250 before:ease-[cubic-bezier(0.25,0.9,0.3,1.1)] checked:bg-ttg13-on checked:before:translate-x-[18px] focus-visible:outline-3 focus-visible:outline-ttg13-focus focus-visible:outline-offset-2 motion-reduce:transition-none motion-reduce:before:transition-none">
    </label>
    <label class="flex items-center gap-5 min-h-16 px-5 py-3.5 cursor-pointer border-t border-ttg13-hair transition-colors duration-200 hover:bg-ttg13-tint has-checked:[&_.ttg13-t]:text-ttg13-ink">
      <span class="flex-1 flex flex-col gap-0.5">
        <b class="ttg13-t text-[14.5px] font-semibold text-ttg13-dim transition-colors duration-200">Location</b>
        <small class="text-[12px] text-ttg13-mute">While using the app</small>
      </span>
      <input type="checkbox" role="switch" aria-label="Location" class="appearance-none shrink-0 w-11 h-6.5 rounded-full bg-ttg13-trackoff relative cursor-pointer transition-colors duration-250 before:content-[''] before:absolute before:top-0.5 before:left-0.5 before:w-[22px] before:h-[22px] before:rounded-full before:bg-white before:shadow-[0_2px_5px_oklch(0.3_0.03_265/0.3)] before:transition-transform before:duration-250 before:ease-[cubic-bezier(0.25,0.9,0.3,1.1)] checked:bg-ttg13-on checked:before:translate-x-[18px] focus-visible:outline-3 focus-visible:outline-ttg13-focus focus-visible:outline-offset-2 motion-reduce:transition-none motion-reduce:before:transition-none">
    </label>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg13-bg: #eceef4;
  --color-ttg13-bg: oklch(0.95 0.008 265);
  --color-ttg13-hair: #eaecf2;
  --color-ttg13-hair: oklch(0.94 0.006 265);
  --color-ttg13-tint: #f7f8fc;
  --color-ttg13-tint: oklch(0.98 0.004 265);
  --color-ttg13-ink: #1f2532;
  --color-ttg13-ink: oklch(0.26 0.015 265);
  --color-ttg13-dim: #737b8d;
  --color-ttg13-dim: oklch(0.58 0.018 265);
  --color-ttg13-mute: #8f97a7;
  --color-ttg13-mute: oklch(0.65 0.015 265);
  --color-ttg13-trackoff: #dfe2ea;
  --color-ttg13-trackoff: oklch(0.9 0.008 265);
  --color-ttg13-on: #2f9e63;
  --color-ttg13-on: oklch(0.63 0.16 155);
  --color-ttg13-okbg: #d4f2e0;
  --color-ttg13-okbg: oklch(0.92 0.07 155);
  --color-ttg13-okink: #1d6944;
  --color-ttg13-okink: oklch(0.44 0.11 155);
  --color-ttg13-warnbg: #fbeccd;
  --color-ttg13-warnbg: oklch(0.93 0.07 80);
  --color-ttg13-warnink: #7a5410;
  --color-ttg13-warnink: oklch(0.48 0.1 70);
  --color-ttg13-offbg: #e9ebf1;
  --color-ttg13-offbg: oklch(0.93 0.006 265);
  --color-ttg13-offink: #5d6478;
  --color-ttg13-offink: oklch(0.5 0.02 265);
  --color-ttg13-focus: #3f63e0;
  --color-ttg13-focus: oklch(0.55 0.19 265);
  --font-ttg13-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ttg-13 {
  width: 100%;
  min-height: 100svh;
}

.ttg-13 input[type="checkbox"] {
  -webkit-appearance: none;
}
```

How this works

The card watches the group. Three badges are stacked in the header, each hidden or shown by a relational variant on the card: any unchecked switch shows amber Partial, no checked switch shows grey No access, and the default green Full access shows when neither matches. The rules are ordered so the most specific case wins on source order, exactly as the CSS version relied on.

Every row is still a plain checkbox. The value of the pattern is that assistive tech sees an ordinary group of switches with labels — the badge is decorative and marked aria-hidden, because a screen reader gets the same information by reading the switches themselves.

Rows self-report too. has-checked: on each label darkens its title, so an enabled permission is legible at a glance without scanning the switch column.

Make it yours

  • Add rows freely. The badge logic needs no changes at all — that is the point of :has().
  • Turn the badge into a progress strip by swapping the three spans for a gradient whose stops are set per state.
  • A working "revoke all" master switch still needs three lines of JavaScript — CSS can read state, never set it.
  • Tint each row's switch per category with an inline --accent read by checked:bg-(--accent).

Gotchas — read before shipping

  • Never rely on source order between variant rules — Tailwind emits them in its own utility order, so two overlapping conditions will not resolve the way they read in your markup. Write mutually exclusive conditions instead.
  • Always put the element type inside the relational selector: has-[input:not(:checked)], never has-[:not(:checked)]. The unscoped form matches the card's own wrapper divs and is true forever.
  • Mark the badge aria-hidden. Announcing a derived summary alongside three real switches is duplicate, not helpful.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() is stable in all evergreen browsers (Firefox 121+). Without it every switch still works and the badge simply stays on its default state.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗not selectortw ↗:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →