Radio

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/radio.css" />

<input type="radio" name="group" /> <input type="radio" name="group" checked />

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

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

<style>
  .choice-card .card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .choice-card .card:has(input:checked) {
    background: var(--ui-neutral-100);
    border-color: var(--ui-neutral-600);
  }
</style>

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