Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Segmented control

A single choice control built from radio inputs, keyboard friendly by default.

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 segmented control. On a <div> in the example. Sets inline-flex display, gap, padding, corner radius, background and shadow, and 4 custom properties.
CSS
.segmented {
  --seg-h: var(--m-control-h-md);
  --seg-px: var(--m-control-px-md);
  --seg-fs: var(--m-control-fs-md);
  --seg-thumb: color-mix(in oklab, var(--surface) calc(100% - 100% * var(--mode)), var(--border));
  display: inline-flex;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: var(--m-radius-lg);
  background-color: var(--muted);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 60%, transparent);
  vertical-align: middle;
}

.cropper-toolbar > .segmented {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
Part Part of the segmented control. On a <label> in the example. Sets alignment, inline-flex display, gap, height, padding and corner radius.
CSS
.segmented-item:where(:hover) {
  color: var(--foreground);
}

.segmented-item:has(> input:disabled) {
  opacity: var(--m-disabled-opacity);
  cursor: not-allowed;
}
Size Extra small size. Not used in the example above. Sets --seg-h, --seg-px and --seg-fs.
CSS
.segmented-xs {
  --seg-h: var(--m-control-h-xs);
  --seg-px: var(--m-control-px-xs);
  --seg-fs: var(--m-control-fs-xs);
}
Size Small size. On a <div> in the example. Sets --seg-h, --seg-px and --seg-fs.
CSS
.segmented-sm {
  --seg-h: var(--m-control-h-sm);
  --seg-px: var(--m-control-px-sm);
  --seg-fs: var(--m-control-fs-sm);
}
Size Medium, the default size. Not used in the example above. Sets --seg-h, --seg-px and --seg-fs.
CSS
.segmented-md {
  --seg-h: var(--m-control-h-md);
  --seg-px: var(--m-control-px-md);
  --seg-fs: var(--m-control-fs-md);
}
Size Large size. On a <div> in the example. Sets --seg-h, --seg-px and --seg-fs.
CSS
.segmented-lg {
  --seg-h: var(--m-control-h-lg);
  --seg-px: var(--m-control-px-lg);
  --seg-fs: var(--m-control-fs-lg);
}
Size Extra large size. Not used in the example above. Sets --seg-h, --seg-px and --seg-fs.
CSS
.segmented-xl {
  --seg-h: var(--m-control-h-xl);
  --seg-px: var(--m-control-px-xl);
  --seg-fs: var(--m-control-fs-xl);
}
Modifier Modifier, combined with the segmented class. On a <div> in the example. Sets flex display and width.
CSS
.segmented-block {
  display: flex;
  width: 100%;
}

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">

<!-- Segmented control: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-3"><div class="segmented" role="radiogroup" aria-label="Range">
  <label class="segmented-item"><input type="radio" name="range" checked> Day</label>
  <label class="segmented-item"><input type="radio" name="range"> Week</label>
  <label class="segmented-item"><input type="radio" name="range"> Month</label>
  <label class="segmented-item"><input type="radio" name="range" disabled> Year</label>
</div>
<div class="segmented segmented-sm mt-3" role="radiogroup" aria-label="View">
  <label class="segmented-item"><input type="radio" name="view" 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="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> List</label>
  <label class="segmented-item"><input type="radio" name="view"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Grid</label>
</div>
<div class="segmented segmented-block segmented-lg mt-3" role="radiogroup" aria-label="Plan">
  <label class="segmented-item"><input type="radio" name="plan"> Monthly</label>
  <label class="segmented-item"><input type="radio" name="plan" checked> Yearly</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 feedbackFloating action buttonA floating action button whose speed dial opens on hover or keyboard focus, with no script.Actions and feedbackCopy buttonA compact button for copying code or links, with a confirmed state.Actions and feedbackToggle groupA row of joined toggles built from checkboxes, so several can be on at once.Actions and feedbackSwapSwaps two pieces of content when its checkbox is checked, with fade, rotate, scale and flip effects.

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.