Web Designer Wall

Snippets Animation

Bootstrap 5 Animated Radio Button Cards

Radio options styled as selectable cards with a small hopping dot animation on selection, grouped in an accessible fieldset. It works with the keyboard and screen readers.

Bootstrap 5 No jQuery Feb 2020 2.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width:640px">
    <div class="wdw-card p-4 p-md-5">
      <span class="wdw-eyebrow">Step 2 of 3</span>
      <h1 class="wdw-heading h3 mt-1 mb-1">How fast do you need it?</h1>
      <p class="wdw-muted mb-4">Choose a delivery option. You can change it until the order ships.</p>
      <fieldset>
        <legend class="visually-hidden">Delivery speed</legend>
        <div class="d-grid gap-3 hop-group">
          <div>
            <input class="btn-check" type="radio" name="speed" id="spA" value="standard" checked>
            <label class="hop-card d-flex align-items-center gap-3 p-3 rounded-4" for="spA">
              <span class="hop-dot" aria-hidden="true"></span>
              <span class="flex-grow-1"><span class="d-block fw-bold">Standard</span><span class="d-block small wdw-muted">Arrives in 5 to 7 days</span></span>
              <span class="fw-bold">Free</span>
            </label>
          </div>
          <div>
            <input class="btn-check" type="radio" name="speed" id="spB" value="express">
            <label class="hop-card d-flex align-items-center gap-3 p-3 rounded-4" for="spB">
              <span class="hop-dot" aria-hidden="true"></span>
              <span class="flex-grow-1"><span class="d-block fw-bold">Express</span><span class="d-block small wdw-muted">Arrives in 2 to 3 days</span></span>
              <span class="fw-bold">$9</span>
            </label>
          </div>
          <div>
            <input class="btn-check" type="radio" name="speed" id="spC" value="nextday">
            <label class="hop-card d-flex align-items-center gap-3 p-3 rounded-4" for="spC">
              <span class="hop-dot" aria-hidden="true"></span>
              <span class="flex-grow-1"><span class="d-block fw-bold">Next day <span class="badge rounded-pill text-bg-primary ms-1">Fastest</span></span><span class="d-block small wdw-muted">Order before 2 pm</span></span>
              <span class="fw-bold">$19</span>
            </label>
          </div>
        </div>
      </fieldset>
      <button type="button" class="btn btn-primary rounded-pill w-100 mt-4">Continue</button>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More animation snippets