Monsoon v0.2.0
Made by Alexandre Kohler Star

Forms

Checkbox

Custom drawn checkbox with checked and indeterminate states, tones, sizes and an animated check.

Forms12 classesNo JavaScriptLight and dark

Example

Full

Classes

12 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 checkbox. On an <input> in the example. Sets inline-grid display, alignment, width, height, text color and background, and 9 custom properties.
CSS
.checkbox-card > .checkbox, .radio-card > .radio {
  margin-top: .0625rem;
}

.checkbox:checked::before, .checkbox:indeterminate::before {
  clip-path: inset(0);
}
Tone Primary tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.checkbox-primary,
.radio-primary,
.toggle-primary,
.range-primary,
.rating-primary {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
}
Tone Accent tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.checkbox-accent, .radio-accent, .toggle-accent, .range-accent {
  --tone: var(--accent);
  --tone-fg: var(--accent-foreground);
}
Tone Success tone. On an <input> in the example. Sets --tone and --tone-fg.
CSS
.checkbox-success, .radio-success, .toggle-success, .range-success {
  --tone: var(--success);
  --tone-fg: var(--success-foreground);
}
Tone Warning tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.checkbox-warning,
.radio-warning,
.toggle-warning,
.range-warning,
.rating-warning {
  --tone: var(--warning);
  --tone-fg: var(--warning-foreground);
}
Tone Danger tone. On an <input> in the example. Sets --tone and --tone-fg.
CSS
.checkbox-danger,
.radio-danger,
.toggle-danger,
.range-danger,
.rating-danger {
  --tone: var(--danger);
  --tone-fg: var(--danger-foreground);
}
Tone Info tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.checkbox-info, .radio-info, .toggle-info, .range-info {
  --tone: var(--info);
  --tone-fg: var(--info-foreground);
}
Tone Neutral tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.checkbox-neutral, .radio-neutral, .toggle-neutral, .range-neutral {
  --tone: var(--foreground);
  --tone-fg: var(--background);
}
Size Extra small size. Not used in the example above. Sets --choice-size.
CSS
.checkbox-xs, .radio-xs, .toggle-xs, .range-xs, .rating-xs {
  --choice-size: .875rem;
}
Size Small size. On an <input> in the example. Sets --choice-size.
CSS
.checkbox-sm, .radio-sm, .toggle-sm, .range-sm, .rating-sm {
  --choice-size: 1rem;
}
Size Medium, the default size. Not used in the example above. Sets --choice-size.
CSS
.checkbox-md, .radio-md, .toggle-md, .range-md, .rating-md {
  --choice-size: 1.125rem;
}
Size Large size. On an <input> in the example. Sets --choice-size.
CSS
.checkbox-lg, .radio-lg, .toggle-lg, .range-lg, .rating-lg {
  --choice-size: 1.375rem;
}

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

<!-- Checkbox: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-4">
  <label class="label"><input type="checkbox" class="checkbox" checked> Remember me</label>
  <label class="label"><input type="checkbox" class="checkbox checkbox-success" checked> Success</label>
  <label class="label"><input type="checkbox" class="checkbox checkbox-danger checkbox-lg"> Large</label>
  <label class="label"><input type="checkbox" class="checkbox checkbox-sm" checked disabled> Disabled</label>
</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.
FormsCheckbox cardA selectable card that highlights when its checkbox is checked.InteractiveTree with checkboxesWith data-m-tree-checkbox every item gets a tristate checkbox: checking a branch checks everything below it, and a branch with some checked children shows as mixed. Space or Enter toggles. Needs monsoon.js.FormsMultiple selectWith multiple or size the select becomes a list box without the chevron.FormsCustom selectAdd select-custom to opt in to the customizable select (appearance: base-select) with a styled picker where supported; other browsers keep the native select.

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.