Monthly / Yearly Pricing Toggle

<div class="pt-toggle"><span class="pt-on">Monthly</span><label class="pt-sw"><input type="checkbox" id="ptCb"><span></span></label><span>Yearly <em>-20%</em></span></div>
<div class="pt-price"><span class="pt-cur">$</span><span id="ptVal">12</span><span class="pt-per">/mo</span></div>

body{background:#f6f7fa;flex-direction:column;gap:24px}
.pt-toggle{display:flex;align-items:center;gap:12px;font:600 14px/1 system-ui,sans-serif;color:#5a627a}
.pt-toggle .pt-on{color:#1a1f36}
.pt-toggle em{color:#16a34a;font-style:normal;font-size:12px}
.pt-sw{position:relative;width:48px;height:26px}
.pt-sw input{opacity:0;width:0;height:0}
.pt-sw span{position:absolute;inset:0;background:#cfd6e4;border-radius:999px;cursor:pointer;transition:.25s}
.pt-sw span::before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s}
.pt-sw input:checked+span{background:linear-gradient(135deg,#ff7a18,#ff477e)}
.pt-sw input:checked+span::before{transform:translateX(22px)}
.pt-price{font:800 56px/1 system-ui,sans-serif;color:#1a1f36}
.pt-cur{font-size:28px;vertical-align:top}.pt-per{font-size:18px;color:#8a93ad;font-weight:600}

document.getElementById('ptCb').onchange=function(){document.getElementById('ptVal').textContent=this.checked?'115':'12';document.querySelector('.pt-per').textContent=this.checked?'/yr':'/mo'};