Radio

A native <input type="radio"> for selecting one option from a group.

Default

Default Comfortable Compact

<label>
  <input type="radio" name="density" value="default" />
  Default
</label>
<label>
  <input type="radio" name="density" value="comfortable" checked />
  Comfortable
</label>
<label>
  <input type="radio" name="density" value="compact" />
  Compact
</label>

Disabled

Default Comfortable

<label>
  <input type="radio" name="density" disabled />
  Default
</label>
<label>
  <input type="radio" name="density" disabled checked />
  Comfortable
</label>

Choice card

A card-style radio group built with a small CSS snippet and semantic markup.

Plus

For individuals and small teams.

Pro

For growing businesses.

Enterprise

For large teams and enterprises.

<style>
  .choice-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border: 1px solid var(--jazz-neutral-300);
    border-radius: var(--spacing-3);

    > div {
      display: grid;
      gap: 0.5rem;
    }

    small {
      color: var(--jazz-neutral-500);
    }
  }
  .choice-card:has(input:checked) {
    background: var(--jazz-neutral-100);
    border-color: var(--jazz-neutral-400);
  }
</style>

<fieldset>
  <label class="choice-card">
    <div>
      <h4>Plus</h4>
      <small>For individuals and small teams.</small>
    </div>
    <input type="radio" name="plan" value="plus" />
  </label>
  <label class="choice-card">
    <div>
      <h4>Pro</h4>
      <small>For growing businesses.</small>
    </div>
    <input type="radio" name="plan" value="pro" checked />
  </label>
</fieldset>