<div class="widget">
  <div class="color-tabs">
    <label class="color-tabs__field">
      <input type="radio" name="size-select" value="1" class="color-tabs__input" checked />
      <span class="color-tabs__badge"></span>
    </label>
    <label class="color-tabs__field">
      <input type="radio" name="size-select" value="2" class="color-tabs__input" />
      <span class="color-tabs__badge"></span>
    </label>
    <label class="color-tabs__field">
      <input type="radio" name="size-select" value="3" class="color-tabs__input" />
      <span class="color-tabs__badge"></span>
    </label>
    <label class="color-tabs__field">
      <input type="radio" name="size-select" value="4" class="color-tabs__input" />
      <span class="color-tabs__badge"></span>
    </label>
    <label class="color-tabs__field">
      <input type="radio" name="size-select" value="5" class="color-tabs__input" />
      <span class="color-tabs__badge"></span>
    </label>
  </div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #eee;
}

.widget {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  max-width: fit-content;
  padding: 20px;
  border-radius: 12px;
  border: 2px solid #e5e5e5;
}

.color-tabs {
  position: relative;
  display: flex;
  gap: 12px;
}

.color-tabs__field {
  position: relative;
  cursor: pointer;
}

.color-tabs__input {
  position: absolute;
  appearance: none;
}

.color-tabs__input:checked + .color-tabs__badge {
  border-color: #816bda;
}

.color-tabs__input:checked + .color-tabs__badge:before {
  background: #816bda;
}

.color-tabs__badge {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  border: 2px solid #6b90da;
}

.color-tabs__badge:before {
  content: "";
  width: 16px;
  height: 16px;
  background: transparent;
  border-radius: 50%;
}