Radio card

#Example

<div class="grid grid-cols-2 gap-3 max-w-md" role="radiogroup" aria-label="Plan">
  <label class="radio-card">
    <input type="radio" class="radio" name="plan" checked>
    <span class="grid gap-0.5">
      <span class="label-text">Starter</span>
      <span class="hint">Free for small teams</span>
    </span>
  </label>
  <label class="radio-card">
    <input type="radio" class="radio" name="plan">
    <span class="grid gap-0.5">
      <span class="label-text">Pro</span>
      <span class="hint">12 USD per seat</span>
    </span>
  </label>
</div>

#Classes

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

.checkbox-card > .checkbox, .radio-card > .radio {
  margin-top: .0625rem;
}

.checkbox-card:hover, .radio-card:hover {
  border-color: color-mix(in oklab, var(--border), var(--foreground) 25%);
}

#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 card: start from the base class, then add modifiers -->
<div class="grid grid-cols-2 gap-3 max-w-md" role="radiogroup" aria-label="Plan">
  <label class="radio-card">
    <input type="radio" class="radio" name="plan" checked>
    <span class="grid gap-0.5">
      <span class="label-text">Starter</span>
      <span class="hint">Free for small teams</span>
    </span>
  </label>
  <label class="radio-card">
    <input type="radio" class="radio" name="plan">
    <span class="grid gap-0.5">
      <span class="label-text">Pro</span>
      <span class="hint">12 USD per seat</span>
    </span>
<!-- 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