# Toggle Group

> Several on/off choices on real checkboxes. A picked option fills with ink from its centre and its plus turns into a check; picked days side by side join into one band. Pure CSS.

Forms · toggle group, checkbox, chips, filter, days, form · HTML and CSS only · no dependencies · updated 2026-11-04
Demo: https://kodza.dev/components/toggle-group/
Source on GitHub: https://github.com/kodza-dev/kodza/tree/main/components/toggle-group

## Files

The code below, served as files: byte for byte what the Kodza site copies (the CSS includes its theme guard).

- [`kodza-toggle-group.css`](https://kodza.dev/registry/toggle-group/kodza-toggle-group.css) · 16.7 KB
- [`kodza-toggle-group.html`](https://kodza.dev/registry/toggle-group/kodza-toggle-group.html) · 4.6 KB · the markup, to adapt and paste into your page

**Can you run shell commands? Download the CSS, don't retype it.** Retyping costs thousands of tokens and can drop or change lines of the CSS. Put the files where your stack expects them (Use it says where: change the `-o` paths):

```bash
curl -fsSL --create-dirs -o kodza/kodza-toggle-group.css https://kodza.dev/registry/toggle-group/kodza-toggle-group.css
```

Then load the file from your page as Use it shows, instead of pasting the content. The HTML is the part you adapt (text, links, modifiers): paste it from the Code section. Copy the CSS from the Code section only if you can't run commands, exactly as it is. (Windows PowerShell: `curl.exe`.)

## API

- Root: `.kodza-toggle-group`
- Variables (set them on the root element itself: it declares its own defaults):
  - `--kz-toggle-group-bg: #ffffff`
  - `--kz-toggle-group-fg: #0a0a0a`
  - `--kz-toggle-group-muted: rgba(10, 10, 10, 0.58)`
  - `--kz-toggle-group-border: rgba(10, 10, 10, 0.1)`
  - `--kz-toggle-group-border-hover: rgba(10, 10, 10, 0.28)`
  - `--kz-toggle-group-ink: #0a0a0a`
  - `--kz-toggle-group-on-ink: #ffffff`
  - `--kz-toggle-group-height: 40px` — one option; --joined: its diameter
  - `--kz-toggle-group-gap: 6px` — the room between options
- Modifiers: `.kodza-toggle-group--joined`

## Keyboard

What each key does, by where the focus is. Keep it working when you adapt the HTML: same elements, same classes.

- On an option (focus in `.kodza-toggle-group__input`):
  - `Space`: Turns the option on or off

## Dark mode

The values Kodza uses on a dark background (`#0a0a0a`). For a page that follows the system theme, add them after the component's CSS:

```css
@media (prefers-color-scheme: dark) {
  .kodza-toggle-group {
    --kz-toggle-group-bg: #161616;
    --kz-toggle-group-fg: #f2f2f0;
    --kz-toggle-group-muted: rgba(242, 242, 240, 0.62);
    --kz-toggle-group-border: rgba(255, 255, 255, 0.12);
    --kz-toggle-group-border-hover: rgba(255, 255, 255, 0.3);
    --kz-toggle-group-ink: #f2f2f0;
    --kz-toggle-group-on-ink: #0a0a0a;
  }
}
```

A site with its own theme switch puts the same rules under its dark selector instead (`[data-theme="dark"] .kodza-toggle-group { … }`); a single dark section, under that section's class.

## Use it

### Plain HTML page

- CSS: `kodza/kodza-toggle-group.css` next to the page (the Files commands as they are), linked in `<head>`: `<link rel="stylesheet" href="kodza/kodza-toggle-group.css">`. Without a shell, paste it in a `<style>` in `<head>` instead. It only touches `kodza-` classes.
- HTML: where the component goes. Paste it as many times as you need: instances never interfere.
- No JS.
- Restyle with the `--kz-…` variables, set on the component's root element itself (the root declares its own defaults, so a value on an ancestor is ignored), and with the modifiers / attributes listed under API.
- Font: it takes the page's own. A site with its own type sets it once for every Kodza component, on `:root`, never by editing the CSS (unset, nothing changes): `--kz-font-label`, the face of the small labels (meta, captions, counters, hints, footer links, button labels); `--kz-font-label-size`, their size, one for all of them (`11px`…); `--kz-font-label-weight`, their weight; `--kz-font-label-tracking`, their letter-spacing; `--kz-font-label-case`, their case (`uppercase`…; code and units keep theirs); `--kz-font-label-leading`, their line-height (`1.45`…; buttons, pills and keys keep their box); `--kz-font-mono`, the monospace face (code, labels, counters). The Kodza look is Geist: `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap">`.
- Corners: a site with its own shapes sets them once for every Kodza component, on `:root`, never by editing the CSS (unset, nothing changes): `--kz-radius-pill` sets the pills (`0` squares them).
- Motion: a site sets its pace once for every Kodza component, on `:root`, never by editing the CSS or the JS: `--kz-motion-scale` multiplies every duration (`0.5` twice as fast, `2` twice as slow, `0` no motion at all, loops stopped, like reduced motion). Unset, nothing changes.

### Claude artifact (claude.ai)

- Paste the CSS in a `<style>`, in the artifact itself: it loads stylesheets only from Google Fonts and scripts only from a few CDNs, so no `<link>` or `<script src>` to Kodza.
- Writing the artifact file with a shell? Insert the downloaded files (Files) with a command instead of retyping them: a line `KODZA-CSS` alone inside the `<style>`, then `sed -e '/^KODZA-CSS$/{r kodza/kodza-toggle-group.css' -e 'd' -e '}' page.html > artifact.html`.
- Font: load Geist from Google Fonts (allowed): `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap">`. A site with its own type sets it once for every Kodza component, on `:root`, never by editing the CSS (unset, nothing changes): `--kz-font-label`, the face of the small labels (meta, captions, counters, hints, footer links, button labels); `--kz-font-label-size`, their size, one for all of them (`11px`…); `--kz-font-label-weight`, their weight; `--kz-font-label-tracking`, their letter-spacing; `--kz-font-label-case`, their case (`uppercase`…; code and units keep theirs); `--kz-font-label-leading`, their line-height (`1.45`…; buttons, pills and keys keep their box); `--kz-font-mono`, the monospace face (code, labels, counters).
- Corners: a site with its own shapes sets them once for every Kodza component, on `:root`, never by editing the CSS (unset, nothing changes): `--kz-radius-pill` sets the pills (`0` squares them).
- Motion: a site sets its pace once for every Kodza component, on `:root`, never by editing the CSS or the JS: `--kz-motion-scale` multiplies every duration (`0.5` twice as fast, `2` twice as slow, `0` no motion at all, loops stopped, like reduced motion). Unset, nothing changes.
- Dark mode: the viewer sets `data-theme="dark"` or `"light"` on `<html>`, or nothing when it follows the system. Write the Dark mode rules twice: inside `@media (prefers-color-scheme: dark)` with `:root:not([data-theme="light"])` in front of each selector, and with `:root[data-theme="dark"]` in front of each selector.
- Forms: there is nowhere to send them. Handle `submit` in your script with `event.preventDefault()` and show the result in the page.

### WordPress

- HTML: a **Custom HTML** block (or a pattern / template part). WordPress keeps this markup as it is only for users allowed to post unfiltered HTML (Administrators; Super Admins on multisite): for anyone else it strips tags such as `<svg>`, `<input>` or `<dialog>`, so add it from the theme (a pattern or template part) instead.
- CSS: the downloaded file goes in the theme, under `wp-content/themes/<your-theme>/kodza/` (the child theme if there is one), enqueued from its functions.php (or a code-snippets plugin):
  ```php
  add_action('wp_enqueue_scripts', function () {
    $dir = get_stylesheet_directory() . '/kodza/';
    $uri = get_stylesheet_directory_uri() . '/kodza/';
    wp_enqueue_style('kodza-toggle-group', $uri . 'kodza-toggle-group.css', [], filemtime($dir . 'kodza-toggle-group.css'));
  });
  ```
  Scoped to `kodza-` classes, the CSS never touches the theme.
- No access to the theme files? The CSS can also go, as it is, in **Appearance → Customize → Additional CSS** (classic theme) or **Styles → Additional CSS** in the Site Editor (block theme).
- No JS.
- Colours: it takes the colour of the text around it (or keeps its own monochrome): nothing to point at the theme.
- WordPress turns straight quotes and `--` into typographic ones in the text of a Custom HTML block (not inside `<code>` or `<pre>`).

#### With Elementor

- HTML: an **HTML** widget (Elementor shows it to administrators only). It keeps the code exactly as pasted, straight quotes included.
- CSS: as above. Elementor's Site Settings → Theme Style styles every button, field, link and image of the page, components included; the theme guard at the end of the CSS keeps the component's buttons, fields and link colours as they are.
- No child theme: the CSS can go in the HTML widget instead, in a `<style>` before the HTML.

### Shopify

- Files: `assets/kodza-toggle-group.css` (the Files commands with `-o assets/…`).
- In the section: `{{ 'kodza-toggle-group.css' | asset_url | stylesheet_tag }}`, then the HTML.

### React / Next.js

- Files, side by side (e.g. in `components/kodza/`): `ToggleGroup.tsx` (below), the CSS block under Code saved as `toggle-group.css`, both as they are. The HTML block is already inside the component: skip it.
- Use it: `import { ToggleGroup } from '@/components/kodza/ToggleGroup';` then `<ToggleGroup />`. Props: `variant` ("joined", or several in an array), `vars` (the `--kz-…` variables listed under API, e.g. `vars={{ '--kz-toggle-group-bg': … }}`), `className`, `style` and the other props of its `<fieldset>` (`onClick`, `aria-…`).
- Next.js App Router: it is a Client Component already (`'use client'`). Pages Router: Next.js takes global CSS only in `pages/_app`, so move the `import './toggle-group.css'` line there.

```tsx
'use client';
// Kodza — Toggle Group, for React. From https://kodza.dev/components/toggle-group/
// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Next to this file: toggle-group.css, the component's CSS from Kodza, as they are.
// Yours to edit: the markup is plain JSX below.
import { useRef, type ComponentPropsWithoutRef, type ComponentRef, type CSSProperties } from 'react';
import './toggle-group.css';

type Variant = "joined";

export type ToggleGroupProps = Omit<ComponentPropsWithoutRef<'fieldset'>, "children" | "variant" | "vars"> & {
  /** Modifier class(es): .kodza-toggle-group--joined */
  variant?: Variant | Variant[];
  /** Settings, as CSS variables on the root */
  vars?: {
    /** default: #ffffff */
    "--kz-toggle-group-bg"?: string | number;
    /** default: #0a0a0a */
    "--kz-toggle-group-fg"?: string | number;
    /** default: rgba(10, 10, 10, 0.58) */
    "--kz-toggle-group-muted"?: string | number;
    /** default: rgba(10, 10, 10, 0.1) */
    "--kz-toggle-group-border"?: string | number;
    /** default: rgba(10, 10, 10, 0.28) */
    "--kz-toggle-group-border-hover"?: string | number;
    /** default: #0a0a0a */
    "--kz-toggle-group-ink"?: string | number;
    /** default: #ffffff */
    "--kz-toggle-group-on-ink"?: string | number;
    /** one option; --joined: its diameter — default: 40px */
    "--kz-toggle-group-height"?: string | number;
    /** the room between options — default: 6px */
    "--kz-toggle-group-gap"?: string | number;
  };
  className?: string;
};

export function ToggleGroup({ variant, vars, className, style, ...rest }: ToggleGroupProps) {
  const ref = useRef<ComponentRef<'fieldset'>>(null);
  const classes = ["kodza-toggle-group", "kodza-toggle-group--joined", ...([] as string[]).concat(variant ?? []).map((v) => `kodza-toggle-group--${v}`), className].filter(Boolean).join(' ');

  return (
    <fieldset {...rest} className={classes} style={{ ...vars, ...style } as CSSProperties} ref={ref}>
      <legend className="kodza-toggle-group__legend">Deploy days</legend>
      <div className="kodza-toggle-group__list">
        <label className="kodza-toggle-group__option">
          <input className="kodza-toggle-group__input" type="checkbox" name="deploy-days" defaultValue="mon" defaultChecked />
          {' '}
          <span className="kodza-toggle-group__label" aria-hidden="true">M</span>
          {' '}
          <span className="kodza-toggle-group__name">Monday</span>
        </label>
        {' '}
        <label className="kodza-toggle-group__option">
          <input className="kodza-toggle-group__input" type="checkbox" name="deploy-days" defaultValue="tue" defaultChecked />
          {' '}
          <span className="kodza-toggle-group__label" aria-hidden="true">T</span>
          {' '}
          <span className="kodza-toggle-group__name">Tuesday</span>
        </label>
        {' '}
        <label className="kodza-toggle-group__option">
          <input className="kodza-toggle-group__input" type="checkbox" name="deploy-days" defaultValue="wed" defaultChecked />
          {' '}
          <span className="kodza-toggle-group__label" aria-hidden="true">W</span>
          {' '}
          <span className="kodza-toggle-group__name">Wednesday</span>
        </label>
        {' '}
        <label className="kodza-toggle-group__option">
          <input className="kodza-toggle-group__input" type="checkbox" name="deploy-days" defaultValue="thu" defaultChecked />
          {' '}
          <span className="kodza-toggle-group__label" aria-hidden="true">T</span>
          {' '}
          <span className="kodza-toggle-group__name">Thursday</span>
        </label>
        {' '}
        <label className="kodza-toggle-group__option">
          <input className="kodza-toggle-group__input" type="checkbox" name="deploy-days" defaultValue="fri" />
          {' '}
          <span className="kodza-toggle-group__label" aria-hidden="true">F</span>
          {' '}
          <span className="kodza-toggle-group__name">Friday</span>
        </label>
        {' '}
        <label className="kodza-toggle-group__option">
          <input className="kodza-toggle-group__input" type="checkbox" name="deploy-days" defaultValue="sat" />
          {' '}
          <span className="kodza-toggle-group__label" aria-hidden="true">S</span>
          {' '}
          <span className="kodza-toggle-group__name">Saturday</span>
        </label>
        {' '}
        <label className="kodza-toggle-group__option">
          <input className="kodza-toggle-group__input" type="checkbox" name="deploy-days" defaultValue="sun" />
          {' '}
          <span className="kodza-toggle-group__label" aria-hidden="true">S</span>
          {' '}
          <span className="kodza-toggle-group__name">Sunday</span>
        </label>
      </div>
    </fieldset>
  );
}
```

## Code

```html
<fieldset class="kodza-toggle-group kodza-toggle-group--joined">
  <legend class="kodza-toggle-group__legend">Deploy days</legend>
  <div class="kodza-toggle-group__list">
    <label class="kodza-toggle-group__option">
      <input class="kodza-toggle-group__input" type="checkbox" name="deploy-days" value="mon" checked>
      <span class="kodza-toggle-group__label" aria-hidden="true">M</span>
      <span class="kodza-toggle-group__name">Monday</span>
    </label>
    <label class="kodza-toggle-group__option">
      <input class="kodza-toggle-group__input" type="checkbox" name="deploy-days" value="tue" checked>
      <span class="kodza-toggle-group__label" aria-hidden="true">T</span>
      <span class="kodza-toggle-group__name">Tuesday</span>
    </label>
    <label class="kodza-toggle-group__option">
      <input class="kodza-toggle-group__input" type="checkbox" name="deploy-days" value="wed" checked>
      <span class="kodza-toggle-group__label" aria-hidden="true">W</span>
      <span class="kodza-toggle-group__name">Wednesday</span>
    </label>
    <label class="kodza-toggle-group__option">
      <input class="kodza-toggle-group__input" type="checkbox" name="deploy-days" value="thu" checked>
      <span class="kodza-toggle-group__label" aria-hidden="true">T</span>
      <span class="kodza-toggle-group__name">Thursday</span>
    </label>
    <label class="kodza-toggle-group__option">
      <input class="kodza-toggle-group__input" type="checkbox" name="deploy-days" value="fri">
      <span class="kodza-toggle-group__label" aria-hidden="true">F</span>
      <span class="kodza-toggle-group__name">Friday</span>
    </label>
    <label class="kodza-toggle-group__option">
      <input class="kodza-toggle-group__input" type="checkbox" name="deploy-days" value="sat">
      <span class="kodza-toggle-group__label" aria-hidden="true">S</span>
      <span class="kodza-toggle-group__name">Saturday</span>
    </label>
    <label class="kodza-toggle-group__option">
      <input class="kodza-toggle-group__input" type="checkbox" name="deploy-days" value="sun">
      <span class="kodza-toggle-group__label" aria-hidden="true">S</span>
      <span class="kodza-toggle-group__name">Sunday</span>
    </label>
  </div>
</fieldset>

<fieldset class="kodza-toggle-group">
  <legend class="kodza-toggle-group__legend">Email me about</legend>
  <div class="kodza-toggle-group__list">
    <label class="kodza-toggle-group__option">
      <input class="kodza-toggle-group__input" type="checkbox" name="email-me" value="releases" checked>
      <span class="kodza-toggle-group__label"><svg class="kodza-toggle-group__mark" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="kodza-toggle-group__plus" d="M8 3v10M3 8h10"/><path class="kodza-toggle-group__check" d="M3 8.5l3.2 3.2L13 4.5" pathLength="1"/></svg>Releases</span>
    </label>
    <label class="kodza-toggle-group__option">
      <input class="kodza-toggle-group__input" type="checkbox" name="email-me" value="breaking" checked>
      <span class="kodza-toggle-group__label"><svg class="kodza-toggle-group__mark" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="kodza-toggle-group__plus" d="M8 3v10M3 8h10"/><path class="kodza-toggle-group__check" d="M3 8.5l3.2 3.2L13 4.5" pathLength="1"/></svg>Breaking changes</span>
    </label>
    <label class="kodza-toggle-group__option">
      <input class="kodza-toggle-group__input" type="checkbox" name="email-me" value="components">
      <span class="kodza-toggle-group__label"><svg class="kodza-toggle-group__mark" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="kodza-toggle-group__plus" d="M8 3v10M3 8h10"/><path class="kodza-toggle-group__check" d="M3 8.5l3.2 3.2L13 4.5" pathLength="1"/></svg>New components</span>
    </label>
    <label class="kodza-toggle-group__option">
      <input class="kodza-toggle-group__input" type="checkbox" name="email-me" value="digest">
      <span class="kodza-toggle-group__label"><svg class="kodza-toggle-group__mark" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="kodza-toggle-group__plus" d="M8 3v10M3 8h10"/><path class="kodza-toggle-group__check" d="M3 8.5l3.2 3.2L13 4.5" pathLength="1"/></svg>Weekly digest</span>
    </label>
  </div>
</fieldset>
```

```css
/* Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license */
/* Kodza — Toggle Group
   Several on/off choices on real checkboxes: days, filters, notification settings. A picked
   option fills with ink from its centre, and its plus spins away while a check draws itself in.
   --joined lays out round options (the days of a week): picked neighbours join into one band of
   ink, so Monday to Thursday reads as one stretch, and the band splits where you drop a day.
   Pure CSS: the form gets the values as usual, and the keyboard is the checkbox's own.
   Everything is tuned with the --kz-toggle-group-* variables. */
.kodza-toggle-group {
  --kz-toggle-group-bg: #ffffff;
  --kz-toggle-group-fg: #0a0a0a;
  --kz-toggle-group-muted: rgba(10, 10, 10, 0.58);
  --kz-toggle-group-border: rgba(10, 10, 10, 0.1);
  --kz-toggle-group-border-hover: rgba(10, 10, 10, 0.28);
  --kz-toggle-group-ink: #0a0a0a;
  --kz-toggle-group-on-ink: #ffffff;
  --kz-toggle-group-height: 40px; /* one option; --joined: its diameter */
  --kz-toggle-group-gap: 6px; /* the room between options */

  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--kz-toggle-group-fg);
}

.kodza-toggle-group__legend {
  margin-bottom: 10px;
  padding: 0;
  font-family: var(--kz-font-label, var(--kz-font-mono, ui-monospace, "SF Mono", Menlo, monospace));
  font-size: var(--kz-font-label-size, 12px);
  font-weight: var(--kz-font-label-weight, inherit);
  line-height: var(--kz-font-label-leading, inherit);
  letter-spacing: var(--kz-font-label-tracking, inherit);
  text-transform: var(--kz-font-label-case, inherit);
  color: var(--kz-toggle-group-muted);
}

/* The full name for screen readers (--joined shows one letter) */
.kodza-toggle-group__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Its own stacking context: the ink and the bands sit above every option's surface */
.kodza-toggle-group__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kz-toggle-group-gap);
  isolation: isolate;
}

.kodza-toggle-group__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  height: var(--kz-toggle-group-height);
  margin: 0;
  padding: 0;
  border-radius: var(--kz-radius-pill, 999px);
  background: var(--kz-toggle-group-bg);
  box-shadow: inset 0 0 0 1px var(--kz-toggle-group-border);
  color: var(--kz-toggle-group-fg);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow calc(0.2s * var(--kz-motion-scale, 1)) ease,
    transform calc(0.15s * var(--kz-motion-scale, 1)) ease;
}

/* The real checkbox covers its option: a click anywhere toggles it */
.kodza-toggle-group__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

/* The ink grows from the centre and keeps the round ends all the way */
.kodza-toggle-group__option::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: var(--kz-toggle-group-ink);
  clip-path: inset(50% 50% round var(--kz-radius-pill, 999px));
  pointer-events: none;
  transition: clip-path calc(0.4s * var(--kz-motion-scale, 1)) cubic-bezier(0.22, 1, 0.36, 1);
}

.kodza-toggle-group__option:has(.kodza-toggle-group__input:checked)::before {
  clip-path: inset(0 round var(--kz-radius-pill, 999px));
}

/* The label fills its option, so its background lines up with the ink. The text is painted
   twice, cut at the ink's edge: on-ink inside a box that grows from the centre exactly like the
   ink, the page colour around it. It never turns grey halfway, and never sits white on white */
.kodza-toggle-group__label {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px 0 13px;
  font-family: var(--kz-font-label, inherit);
  font-size: var(--kz-font-label-size, 15px);
  font-weight: var(--kz-font-label-weight, 500);
  line-height: 1;
  letter-spacing: var(--kz-font-label-tracking, inherit);
  text-transform: var(--kz-font-label-case, inherit);
  white-space: nowrap;
  color: transparent;
  background:
    linear-gradient(var(--kz-toggle-group-on-ink), var(--kz-toggle-group-on-ink)) center / 0% 0% no-repeat,
    linear-gradient(var(--kz-toggle-group-fg), var(--kz-toggle-group-fg)) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size calc(0.4s * var(--kz-motion-scale, 1)) cubic-bezier(0.22, 1, 0.36, 1);
}

.kodza-toggle-group__option:has(.kodza-toggle-group__input:checked) .kodza-toggle-group__label {
  background-size: 100% 100%, 100% 100%;
}

/* The plus spins away while the check draws itself in. Each keeps its own colour: the plus
   leaves before the ink reaches it, the check only shows where the ink already is */
.kodza-toggle-group__mark {
  display: block;
  flex: none;
  overflow: visible;
}

.kodza-toggle-group__plus,
.kodza-toggle-group__check {
  transform-box: fill-box;
  transform-origin: center;
}

.kodza-toggle-group__plus {
  stroke: var(--kz-toggle-group-fg);
  transition:
    transform calc(0.35s * var(--kz-motion-scale, 1)) cubic-bezier(0.22, 1, 0.36, 1),
    opacity calc(0.2s * var(--kz-motion-scale, 1)) ease;
}

.kodza-toggle-group__check {
  stroke: var(--kz-toggle-group-on-ink);
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    stroke-dashoffset calc(0.3s * var(--kz-motion-scale, 1)) cubic-bezier(0.65, 0, 0.35, 1),
    opacity calc(0.1s * var(--kz-motion-scale, 1)) ease;
}

.kodza-toggle-group__option:has(.kodza-toggle-group__input:checked) .kodza-toggle-group__plus {
  opacity: 0;
  transform: rotate(90deg) scale(0.3);
}

.kodza-toggle-group__option:has(.kodza-toggle-group__input:checked) .kodza-toggle-group__check {
  stroke-dashoffset: 0;
  opacity: 1;
  transition-delay: calc(0.12s * var(--kz-motion-scale, 1)), 0s;
}

@media (hover: hover) {
  .kodza-toggle-group__option:hover {
    box-shadow: inset 0 0 0 1px var(--kz-toggle-group-border-hover);
  }
}

.kodza-toggle-group:not(.kodza-toggle-group--joined) .kodza-toggle-group__option:active {
  transform: scale(0.97);
}

.kodza-toggle-group__option:has(.kodza-toggle-group__input:focus-visible) {
  outline: 2px solid var(--kz-toggle-group-fg);
  outline-offset: 2px;
}

.kodza-toggle-group__option:has(.kodza-toggle-group__input:disabled) {
  cursor: not-allowed;
  opacity: 0.4;
}

/* --joined: round options in one row. Each picked day draws its own circle, and a band of ink
   runs from it over the next day when that one is picked too, so neighbours read as one stretch */
.kodza-toggle-group--joined .kodza-toggle-group__list {
  flex-wrap: nowrap;
}

.kodza-toggle-group--joined .kodza-toggle-group__option {
  flex: none;
  width: var(--kz-toggle-group-height);
  padding: 0;
}

/* The letter's on-ink copy: a disc that grows like the ink, and the part of this day's band
   right of its centre (the band's left end is round and sits on that centre all the way). The
   band coming from the previous day never needs a copy: this day's disc covers the letter first */
.kodza-toggle-group--joined .kodza-toggle-group__label {
  padding: 0;
  background:
    radial-gradient(closest-side, var(--kz-toggle-group-on-ink) 100%, transparent 0) center / 0% 0% no-repeat,
    linear-gradient(var(--kz-toggle-group-on-ink), var(--kz-toggle-group-on-ink)) calc(var(--kz-toggle-group-height) / 2) 50% / 0% 0% no-repeat,
    linear-gradient(var(--kz-toggle-group-fg), var(--kz-toggle-group-fg)) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

.kodza-toggle-group--joined .kodza-toggle-group__option:has(.kodza-toggle-group__input:checked) .kodza-toggle-group__label {
  background-size: 100% 100%, 0% 0%, 100% 100%;
}

.kodza-toggle-group--joined .kodza-toggle-group__option:has(.kodza-toggle-group__input:checked):has(+ .kodza-toggle-group__option .kodza-toggle-group__input:checked) .kodza-toggle-group__label {
  background-size: 100% 100%, calc(150% + var(--kz-toggle-group-gap)) 100%, 100% 100%;
}

/* The band spans this day and the next. At rest it is a point at this day's centre; picked, this
   day's circle; picked with the next day, the whole stadium over both. Its moving end stays round,
   and dropping a day pulls it back into the circle that stays */
.kodza-toggle-group--joined .kodza-toggle-group__option::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: calc(200% + var(--kz-toggle-group-gap));
  background: var(--kz-toggle-group-ink);
  clip-path: inset(50% calc(100% - var(--kz-toggle-group-height) / 2) 50% calc(var(--kz-toggle-group-height) / 2) round var(--kz-radius-pill, 999px));
  pointer-events: none;
  transition: clip-path calc(0.4s * var(--kz-motion-scale, 1)) cubic-bezier(0.22, 1, 0.36, 1);
}

.kodza-toggle-group--joined .kodza-toggle-group__option:has(.kodza-toggle-group__input:checked)::after {
  clip-path: inset(0 calc(100% - var(--kz-toggle-group-height)) 0 0 round var(--kz-radius-pill, 999px));
}

.kodza-toggle-group--joined .kodza-toggle-group__option:has(.kodza-toggle-group__input:checked):has(+ .kodza-toggle-group__option .kodza-toggle-group__input:checked)::after {
  clip-path: inset(0 round var(--kz-radius-pill, 999px));
}

/* The last day has no next one, and its band would only widen the page */
.kodza-toggle-group--joined .kodza-toggle-group__option:last-child::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .kodza-toggle-group__option,
  .kodza-toggle-group__option::before,
  .kodza-toggle-group__option::after,
  .kodza-toggle-group__label,
  .kodza-toggle-group__plus,
  .kodza-toggle-group__check {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Theming example — on a dark background:
.dark-section .kodza-toggle-group {
  --kz-toggle-group-bg: #161616;
  --kz-toggle-group-fg: #f2f2f0;
  --kz-toggle-group-muted: rgba(242, 242, 240, 0.62);
  --kz-toggle-group-border: rgba(255, 255, 255, 0.12);
  --kz-toggle-group-border-hover: rgba(255, 255, 255, 0.3);
  --kz-toggle-group-ink: #f2f2f0;
  --kz-toggle-group-on-ink: #0a0a0a;
}
*/

/* kodza-guard 94692547434d — generated by Kodza, do not edit.
   Theme guard: keeps a site's own CSS (WordPress themes, Bootstrap, CSS resets…) off this
   component. :not(#_) is always true and weighs as much as an id, so these lines win over
   theme rules made of classes and tags. Customise the component through its --kz-* variables. */

/* What the browser gives, where the component sets it only in some states: at the lowest weight, so its own rules below put it back */

:where(.kodza-toggle-group__option):not(#_) {
  outline: revert;
  outline-offset: revert;
}

/* What the browser gives, on everything the component leaves to it */

.kodza-toggle-group:not(#_) {
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-height: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-toggle-group__legend:not(#_) {
  border: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  margin-top: revert;
  margin-right: revert;
  margin-left: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-style: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  white-space: revert;
}

.kodza-toggle-group__list:not(#_),
.kodza-toggle-group__label:not(#_),
.kodza-toggle-group__name:not(#_),
.kodza-toggle-group__plus:not(#_),
.kodza-toggle-group__check:not(#_) {
  box-sizing: revert;
}

.kodza-toggle-group__option:not(#_) {
  border: revert;
  text-decoration: revert;
  list-style: revert;
  float: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-toggle-group__input:not(#_) {
  border: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  white-space: revert;
  min-height: revert;
}

.kodza-toggle-group__mark:not(#_) {
  border: revert;
  margin: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-toggle-group__legend:not(#_):where(:not([hidden])),
.kodza-toggle-group__input:not(#_):where(:not([hidden])) {
  display: revert;
}

.kodza-toggle-group__legend:not(#_):where([hidden]),
.kodza-toggle-group__input:not(#_):where([hidden]) {
  display: none;
}

.kodza-toggle-group__option:not(#_)::before,
.kodza-toggle-group__input:not(#_)::before,
.kodza-toggle-group__option:not(#_)::after,
.kodza-toggle-group__input:not(#_)::after {
  box-sizing: revert;
}

/* The component's own rules, one step stronger: real buttons and fields, what it sets on tags themes style (links, lists, headings, images…), and the root width (a theme may narrow it, never widen it) */

.kodza-toggle-group:not(#_) {
  display: block;
  padding: 0;
  border: 0;
  color: var(--kz-toggle-group-fg);
}

.kodza-toggle-group__legend:not(#_) {
  margin-bottom: 10px;
  padding: 0;
  font-family: var(--kz-font-label, var(--kz-font-mono, ui-monospace, "SF Mono", Menlo, monospace));
  font-size: var(--kz-font-label-size, 12px);
  font-weight: var(--kz-font-label-weight, inherit);
  line-height: var(--kz-font-label-leading, inherit);
  letter-spacing: var(--kz-font-label-tracking, inherit);
  text-transform: var(--kz-font-label-case, inherit);
  color: var(--kz-toggle-group-muted);
}

.kodza-toggle-group__option:not(#_) {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: var(--kz-radius-pill, 999px);
  background: var(--kz-toggle-group-bg);
  box-shadow: inset 0 0 0 1px var(--kz-toggle-group-border);
  color: var(--kz-toggle-group-fg);
  transition: box-shadow calc(0.2s * var(--kz-motion-scale, 1)) ease,
    transform calc(0.15s * var(--kz-motion-scale, 1)) ease;
}

.kodza-toggle-group__input:not(#_) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.kodza-toggle-group__mark:not(#_) {
  display: block;
}

@media (hover: hover) {
  .kodza-toggle-group__option:hover:not(#_) {
    box-shadow: inset 0 0 0 1px var(--kz-toggle-group-border-hover);
  }
}

.kodza-toggle-group__option:has(.kodza-toggle-group__input:focus-visible):not(#_) {
  outline: 2px solid var(--kz-toggle-group-fg);
  outline-offset: 2px;
}

.kodza-toggle-group--joined .kodza-toggle-group__option:not(#_) {
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kodza-toggle-group__option:not(#_) {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}
```

Free to use, from Kodza (https://kodza.dev).