Radio Pill Group
Pill choice with sliding background indicator
How to use it
- Paste the HTML where the forms & inputs should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Radio Pill Group · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="rpg-wrap"><span class="rpg-glider"></span><label class="rpg-pill"><input type="radio" name="rpg" checked><span>Maand</span></label><label class="rpg-pill"><input type="radio" name="rpg"><span>Kwartaal</span></label><label class="rpg-pill"><input type="radio" name="rpg"><span>Jaar</span></label></div>
</div>/* Radio Pill Group · NedDev · eigen werk. */
.rpg-wrap{position:relative;display:inline-flex;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:30px;padding:5px;font-family:'Switzer',sans-serif}
.rpg-glider{position:absolute;top:5px;bottom:5px;border-radius:24px;background:#0a0a0a;transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)}
.rpg-pill{position:relative;z-index:1;cursor:pointer}.rpg-pill input{position:absolute;opacity:0;pointer-events:none}
.rpg-pill span{display:block;padding:9px 20px;font-size:14px;font-weight:600;color:rgba(10,10,10,.55);transition:color .25s;border-radius:24px}
.rpg-pill input:checked+span{color:#fff}// Radio Pill Group · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.rpg-wrap')||root;var glider=root.querySelector('.rpg-glider'),pills=[].slice.call(root.querySelectorAll('.rpg-pill'));function move(p){glider.style.left=p.offsetLeft+'px';glider.style.width=p.offsetWidth+'px';}pills.forEach(function(p){p.querySelector('input').addEventListener('change',function(){move(p);});});var init=pills.filter(function(p){return p.querySelector('input').checked;})[0]||pills[0];requestAnimationFrame(function(){move(init);});
}
init(document.querySelector('.jouw-container'));More forms & inputs
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →