Coder Wrap provides free to use snippets

.checkbox-flip h3 {
 font-family: sans-serif;
 text-align: center;
 font-size: 30px;
 margin-top: 10%;
}
.checkbox-flip * {
 box-sizing: border-box;
}
.toggle {
 max-width: 400px;
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 margin: auto;
 font-family: sans-serif;
 position: relative;
 border: solid #F79E02 2px;
 border-radius: 56px;
 transition: transform cubic-bezier(0, 0, 0.30, 2) .4s;
 transform-style: preserve-3d;
 perspective: 800px;
}

.toggle>input[type="radio"] {
 display: none;
}

.toggle>#choice1:checked~#flap {
 transform: rotateY(-180deg);
}

.toggle>#choice1:checked~#flap>.content {
 transform: rotateY(-180deg);
}

.toggle>#choice2:checked~#flap {
 transform: rotateY(0deg);
}

.toggle>label {
 display: inline-block;
 min-width: 170px;
 padding: 20px;
 font-size: 20px;
 text-align: center;
 color: #F79E02;
 cursor: pointer;
 width: 100%;
}

.toggle>label, .toggle>#flap {
 font-weight: bold;
 text-transform: capitalize;
}

.toggle>#flap {
 position: absolute;
 top: calc(0px - 2px);
 left: 50%;
 height: calc(100% + 2px * 2);
 width: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 20px;
 background-color: #F79E02;
 border-top-right-radius: 55px;
 border-bottom-right-radius: 55px;
 transform-style: preserve-3d;
 transform-origin: left;
 transition: transform cubic-bezier(0.4, 0, 0.2, 1) .5s;
}

.toggle>#flap>.content {
 color: #fff;
 transition: transform 0s linear .25s;
 transform-style: preserve-3d;
}

const st = {};

st.flap = document.querySelector('#flap');
st.toggle = document.querySelector('.toggle');

st.choice1 = document.querySelector('#choice1');
st.choice2 = document.querySelector('#choice2');

st.flap.addEventListener('transitionend', () => {

if (st.choice1.checked) {
 st.toggle.style.transform = 'rotateY(-15deg)';
 setTimeout(() => st.toggle.style.transform = '', 400);
} else {
 st.toggle.style.transform = 'rotateY(15deg)';
 setTimeout(() => st.toggle.style.transform = '', 400);
}

})

st.clickHandler = (e) => {
 if (e.target.tagName === 'LABEL') {
  setTimeout(() => {
      st.flap.children[0].textContent = e.target.textContent;
  }, 250);
 }
}

document.addEventListener('DOMContentLoaded', () => {
 st.flap.children[0].textContent = st.choice2.nextElementSibling.textContent;
});

document.addEventListener('click', (e) => st.clickHandler(e));