JSFiddle - React, Tailwind, and code Playground

HTML

<label class="avatar-label">
  <input type="checkbox" class="avatar-input" name="avatar" value="1">
  <img class="avatar-img" src="https://picsum.photos/100?random=1" alt="Avatar 1">
</label>

<label class="avatar-label">
  <input type="checkbox" class="avatar-input" name="avatar" value="2">
  <img class="avatar-img" src="https://picsum.photos/100?random=2" alt="Avatar 2">
</label>

<label class="avatar-label">
  <input type="checkbox" class="avatar-input" name="avatar" value="3">
  <img class="avatar-img" src="https://picsum.photos/100?random=3" alt="Avatar 3">
</label>

CSS

.avatar-input {
  appearance: none;
  margin: 0;
}

.avatar-img {
  border: 2px solid transparent;
  border-radius: 50%;
  transition: border-color 0.3s ease;
  background-color: transparent;
}

.avatar-img:hover {
  border-color: #333;
}

.avatar-input:checked + .avatar-img {
  border-color: #00ff00;
  outline: 2px solid #00ff00;
}

JavaScript

const avatarInputs = document.querySelectorAll('.avatar-input');

for (const avatarInput of avatarInputs) {
  avatarInput.addEventListener('change', (event) => {

    if (event.target.checked) {
      avatarInputs.forEach(checkbox => checkbox.checked = false);
      event.target.checked = true;
    }

  });
}