Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Toggle group

A row of joined toggles built from checkboxes, so several can be on at once.

Actions and feedback8 classesNo JavaScriptLight and dark

Example

Full

Classes

8 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.

ClassTypeWhat it does
Base Base class of the toggle group. On a <div> in the example. Sets inline-flex display, border, corner radius, background and overflow, and --tg-h, --tg-px and --tg-fs.
CSS
.toggle-group {
  --tg-h: var(--m-control-h-md);
  --tg-px: var(--m-control-px-md);
  --tg-fs: var(--m-control-fs-md);
  display: inline-flex;
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-md);
  background-color: var(--surface);
  overflow: hidden;
  vertical-align: middle;
}
Part Part of the toggle group. On a <label> in the example. Sets absolute position, width, height, margin, opacity and native control styling, and 4 custom properties.
CSS
.toggle-group-item:where(:hover) {
  background-color: var(--surface-2);
  color: var(--foreground);
}

.toggle-group-item:has(> input:disabled) {
  opacity: var(--m-disabled-opacity);
  cursor: not-allowed;
}
Modifier Modifier, combined with the toggle-group class. Not used in the example above. Sets alignment and border.
CSS
.toggle-group-vertical {
  flex-direction: column;
}

.toggle-group-vertical > .toggle-group-item + .toggle-group-item {
  border-inline-start: 0;
  border-block-start: var(--m-border-width) solid var(--border);
}
Size Extra small size. Not used in the example above. Sets --tg-h, --tg-px and --tg-fs.
CSS
.toggle-group-xs {
  --tg-h: var(--m-control-h-xs);
  --tg-px: var(--m-control-px-xs);
  --tg-fs: var(--m-control-fs-xs);
}
Size Small size. On a <div> in the example. Sets --tg-h, --tg-px and --tg-fs.
CSS
.toggle-group-sm {
  --tg-h: var(--m-control-h-sm);
  --tg-px: var(--m-control-px-sm);
  --tg-fs: var(--m-control-fs-sm);
}
Size Medium, the default size. Not used in the example above. Sets --tg-h, --tg-px and --tg-fs.
CSS
.toggle-group-md {
  --tg-h: var(--m-control-h-md);
  --tg-px: var(--m-control-px-md);
  --tg-fs: var(--m-control-fs-md);
}
Size Large size. Not used in the example above. Sets --tg-h, --tg-px and --tg-fs.
CSS
.toggle-group-lg {
  --tg-h: var(--m-control-h-lg);
  --tg-px: var(--m-control-px-lg);
  --tg-fs: var(--m-control-fs-lg);
}
Size Extra large size. Not used in the example above. Sets --tg-h, --tg-px and --tg-fs.
CSS
.toggle-group-xl {
  --tg-h: var(--m-control-h-xl);
  --tg-px: var(--m-control-px-xl);
  --tg-fs: var(--m-control-fs-xl);
}

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.

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

<!-- Toggle group: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-3"><div class="toggle-group" role="group" aria-label="Text style">
  <label class="toggle-group-item" aria-label="Bold"><input type="checkbox" checked><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 12h9a4 4 0 0 1 0 8H6V4h8a4 4 0 0 1 0 8"/></svg></label>
  <label class="toggle-group-item" aria-label="Italic"><input type="checkbox"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 4h-9M14 20H5M15 4 9 20"/></svg></label>
  <label class="toggle-group-item" aria-label="Underline"><input type="checkbox" checked><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4v6a6 6 0 0 0 12 0V4M4 20h16"/></svg></label>
</div>
<div class="toggle-group toggle-group-sm mt-3" role="group" aria-label="Days">
  <label class="toggle-group-item"><input type="checkbox" checked> Mon</label>
  <label class="toggle-group-item"><input type="checkbox"> Tue</label>
  <label class="toggle-group-item"><input type="checkbox" checked> Wed</label>
  <label class="toggle-group-item"><input type="checkbox"> Thu</label>
</div></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

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.
Actions and feedbackButton groupJoined controls that share borders, horizontally or vertically, and a toolbar that spaces groups apart.FormsToggleA switch drawn on a native checkbox, with tones and sizes.FormsInput groupJoins inputs with prefix and suffix addons or buttons; group sizes apply to every child.FormsSwitch groupA list of settings, each with a label, a description and a toggle.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.