Switch group

#Example

<div class="switch-group max-w-sm">
  <label class="switch-group-item">
    <span class="grid gap-0.5">
      <span class="label-text">Email alerts</span>
      <span class="hint">When someone mentions you</span>
    </span>
    <input type="checkbox" class="toggle" role="switch" checked>
  </label>
  <label class="switch-group-item">
    <span class="grid gap-0.5">
      <span class="label-text">Weekly digest</span>
      <span class="hint">A summary every Monday</span>
    </span>
    <input type="checkbox" class="toggle" role="switch">
  </label>
</div>

#Classes

2 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.switch-group {
  display: grid;
  overflow: hidden;
  background-color: var(--surface);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-xl);
}

.switch-group-item:has(:disabled) {
  cursor: not-allowed;
  opacity: var(--m-disabled-opacity);
}

.switch-group-item + .switch-group-item {
  border-top: var(--m-border-width) solid var(--border);
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Switch group: start from the base class, then add modifiers -->
<div class="switch-group max-w-sm">
  <label class="switch-group-item">
    <span class="grid gap-0.5">
      <span class="label-text">Email alerts</span>
      <span class="hint">When someone mentions you</span>
    </span>
    <input type="checkbox" class="toggle" role="switch" checked>
  </label>
  <label class="switch-group-item">
    <span class="grid gap-0.5">
      <span class="label-text">Weekly digest</span>
      <span class="hint">A summary every Monday</span>
    </span>
    <input type="checkbox" class="toggle" role="switch">
<!-- the full example is in the Code tab above -->

#Accessibility

• Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
• Checkboxes and radios stay real inputs, so they keep native keyboard behavior (Space toggles, arrow keys move within a radio group) and form submission.
• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components