<fieldset>
  <legend>Select an option</legend>
  <label>
    <input type="radio" name="items" value="item1" checked>
    Item 1
  </label>
  <label>
    <input type="radio" name="items" value="item2">
    Item 2
  </label>
  <label>
    <input type="radio" name="items" value="item3">
    Item 3
  </label>
  <label>
    <input type="radio" name="items" value="item4">
    Item 4
  </label>
</fieldset>
fieldset {
  display: grid;
  gap: 1rem;
}

label {
  display: flex;
  gap: .5rem;
}

input[type="radio"] {
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 50%;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type="radio"]:checked::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  display: block;
  box-shadow: inset 1em 1em #000;
}

input[type="radio"]::before {
  view-transition-name: radio-input;
}

::view-transition-group(radio-input) {
  z-index: 1;
}

::view-transition-group(*) {
  animation-duration: .5s;
}

// Source: https://modern-web-weekly.ghost.io/modern-web-weekly-46/
document.querySelectorAll('input[type="radio"]').forEach(radio => {
  radio.addEventListener('click', (e) => {
    e.preventDefault(); 
    
    document.startViewTransition(() => {
      radio.checked = true; 
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.