Create a toggle button with two radio inputs

by Haze32

HTML

<div class="radio-input">
  <label>
  <input value="style1" name="value-radio" id="value-1" type="radio" checked="">
  <span>1</span>
  </label>
  <label>
    <input value="style2" name="value-radio" id="value-2" type="radio">
  <span>2</span>
  </label>
  <label>
    <input value="style3" name="value-radio" id="value-3" type="radio">
  <span>3</span>
  </label>
  <label>
    <input value="style4" name="value-radio" id="value-4" type="radio">
  <span>4</span>
  </label>
  <span class="selection"></span>
</div>

<br>
<div class="box style1">

</div>

CSS

.box{
  width:100px;
  height:100px;
}
.style1{
  background: red;
}
.style2{
  background: green;
}
.style3{
  background: blue;
}



.radio-input input {
  display: none;
}

.radio-input {
  --container_width: 100px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 6px;
  background-color: #fff;
  color: #000000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
}

.radio-input label {
  width: 100%;
  padding: 2px 1px 1px 1px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
}

.selection {
  display: none;
  position: absolute;
  height: 100%;
  width: calc(var(--container_width) / 4);
  z-index: 0;
  left: 0;
  top: 0;
  transition: .15s ease;
}

.radio-input label:has(input:checked) {
  color: #fff;
}

.radio-input label:has(input:checked) ~ .selection {
  background-color: rgb(11 117 223);
  display: inline-block;
}

.radio-input label:nth-child(1):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 0/4));
}

.radio-input label:nth-child(2):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 1/4));
}

.radio-input label:nth-child(3):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 2/4));
}

.radio-input label:nth-child(4):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 3/4));
}

JavaScript

const box = document.querySelector(".box")
const radios = document.querySelectorAll('input[name="value-radio"]')

radios.forEach((radio) => {
  radio.addEventListener("change", () => {
    box.className = "box"
    box.classList.add(radio.value)
  })
})