Tristate Toggle Switch

based on https://dev.to/sanaz/tristate-toggle-switch-509n

by Mykola Dolynskyi

HTML

<div class="upwrap">
<div class="theme-toggle">
  <label class="custom-radio-button">
    <div class="label_text">Month</div>
    <input id="first" name="toggle-state" type="radio" checked />
    <span class="checkmark"></span>
  </label>

  <label class="custom-radio-button">
    <div class="label_text">Quarter</div>
    <input id="second" name="toggle-state" type="radio" />
    <span class="checkmark"></span>
  </label>

  <label class="custom-radio-button">
    <div class="label_text">Year</div>
    <input id="third" name="toggle-state" type="radio" />
    <span class="checkmark"></span>
  </label>
</div>
<div class="period_text">

</div>
</div>

CSS

.upwrap {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}

.theme-toggle {
   display: inline-flex;
   justify-content: center;
   align-items: flex-start;
   border: 2px solid #444;
   border-radius: 10px;
   width: auto;
}

.custom-radio-button {
   width: 20px;
   height: 20px;
   /*border: 2px solid #444;
   border-radius: 50%;*/
   display: flex;
   justify-content: center;
   align-items: center;
}

.custom-radio-button input {
   display: none;
}

.custom-radio-button .checkmark {
   width: calc(100% - 6px);
   height: calc(100% - 6px);
   background-color: gray;
   border-radius: 50%;
   display: inline-block;
   /*opacity: 0;*/
   transition: opacity 0.3s ease;
   opacity: 0.3;
}

.custom-radio-button input:checked + .checkmark {
   opacity: 1;
   display: inline-block;
   z-index: 2;
   background-color: green;
}

label .label_text {
  z-index: -100;
  display: none;
}

.period_text {
  text-align: center;
}

JavaScript

const radio_change = function() {
  const checked = document.querySelector('.upwrap .custom-radio-button input:checked');
  console.log(checked);
  const text = checked.parentElement.querySelector('.label_text').innerHTML;
  const pt = document.querySelector('.upwrap .period_text');
  pt.innerHTML = text ? text : 'select period';

}

const inputs = document.querySelectorAll('.upwrap .custom-radio-button input')
//console.log(inputs);
inputs.forEach(function(input){
input.addEventListener('change', radio_change);
});

radio_change();