Радиокнопки используются для выбора одного из множества значений. Если текст радиокнопки короткий, то уместно использовать переключатель. Такой вариант мы реализуем в этой статье с использованием чистого CSS.

Навигация по статье

Разметка радиокнопок

<ul class="switcher">
  <li class="switcher__item">
    <input
      type="radio"
      name="switch"
      value="switch1"
      id="switch1"
      class="default-radio"
      checked="checked"
    />
    <label class="custom-radio" for="switch1">Switch 1</label>
  </li>
  <li class="switcher__item">
    <input
      type="radio"
      name="switch"
      value="switch2"
      id="switch2"
      class="default-radio"
    />
    <label class="custom-radio" for="switch2">Switch 2</label>
  </li>
  <li class="switcher__item">
    <input
      type="radio"
      name="switch"
      value="switch3"
      id="switch3"
      class="default-radio"
    />
    <label class="custom-radio" for="switch3">Switch 3</label>
  </li>
  <li class="switcher__item">
    <input
      type="radio"
      name="switch"
      value="switch4"
      id="switch4"
      class="default-radio"
    />
    <label class="custom-radio" for="switch4">Switch 4</label>
  </li>
  <li class="switcher__item">
    <input
      type="radio"
      name="switch"
      value="switch5"
      id="switch5"
      class="default-radio"
    />
    <label class="custom-radio" for="switch5">Switch 5</label>
  </li>
</ul>

Стилизация радиокнопок

Комментарии даны в коде.

.switcher {
  display: flex; /* Размещаем кнопки в ряд */
  user-select: none; /* Запрещаем выделение при клике */
}

/* Скрываем браузерные радиокнопки */
.switcher .default-radio {
  display: none;
}

/* Стилизуем кастомные радиокнопки */
.switcher__item .custom-radio {
  display: inline-block;
  padding: 15px 20px;
  color: #111;
  border: 1px solid #999;
  border-right: none;
  cursor: pointer;
}

/* Стили при наведении */
.switcher__item label:hover {
  background-color: #f5f5f5;
}

/* Закругление для первой кнопки */
.switcher__item:first-child label {
  border-radius: 5px 0 0 5px;
}

/* Закругление для последней кнопки */
.switcher__item:last-child label {
  border-right: 1px solid #999;
  border-radius: 0 5px 5px 0;
}

/* При состоянии checked - меняем цвет кнопки */
.switcher__item input:checked + label {
  background-color: #ffeac4;
}

Получаем значение

Функция getSwValue получает значение выбранной радио кнопки.

const swithes = document.querySelectorAll(".default-radio");

swithes.forEach((sw) => {
  sw.addEventListener("change", getSwValue);
});

function getSwValue(e) {
  console.log(e.target.value);
}