Forms
Radio
Custom drawn radio buttons with tones and sizes.
Example
<div class="flex flex-wrap items-center gap-4" role="radiogroup" aria-label="Billing">
<label class="label"><input type="radio" class="radio" name="billing" checked> Monthly</label>
<label class="label"><input type="radio" class="radio" name="billing"> Yearly</label>
<label class="label"><input type="radio" class="radio radio-accent radio-lg" name="tone" checked> Accent</label>
<label class="label"><input type="radio" class="radio radio-info radio-sm" name="tone2" checked> Info</label>
</div>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.
| Class | Type | What it does |
|---|---|---|
| Base | Base class of the radio. On an <input> in the example. Sets inline-grid display, alignment, width, height, text color and background, and 9 custom properties.CSS |
|
| Tone | Primary tone. Not used in the example above. Sets --tone and --tone-fg.CSS |
|
| Tone | Accent tone. On an <input> in the example. Sets --tone and --tone-fg.CSS |
|
| Tone | Success tone. Not used in the example above. Sets --tone and --tone-fg.CSS |
|
| Tone | Warning tone. Not used in the example above. Sets --tone and --tone-fg.CSS |
|
| Tone | Danger tone. Not used in the example above. Sets --tone and --tone-fg.CSS |
|
| Tone | Info tone. On an <input> in the example. Sets --tone and --tone-fg.CSS |
|
| Tone | Neutral tone. Not used in the example above. Sets --tone and --tone-fg.CSS |
|
| Size | Extra small size. Not used in the example above. Sets --choice-size.CSS |
|
| Size | Small size. On an <input> in the example. Sets --choice-size.CSS |
|
| Size | Medium, the default size. Not used in the example above. Sets --choice-size.CSS |
|
| Size | Large size. On an <input> in the example. Sets --choice-size.CSS |
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">
<!-- Radio: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-4" role="radiogroup" aria-label="Billing">
<label class="label"><input type="radio" class="radio" name="billing" checked> Monthly</label>
<label class="label"><input type="radio" class="radio" name="billing"> Yearly</label>
<label class="label"><input type="radio" class="radio radio-accent radio-lg" name="tone" checked> Accent</label>
<label class="label"><input type="radio" class="radio radio-info radio-sm" name="tone2" checked> Info</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
labellinked withfor, or anaria-labelwhen the purpose is obvious from context. Link help and error text witharia-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-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.