Twee pakketten naast elkaar kiezen New
Choice between two plans as radio cards side by side, with what each includes and a line that explains the difference in plain words ("for €7 a month more: repairs within 8 hours and no call-out fee"). The chosen card gets a heavy border and the button below takes over its name and price. Arrow keys switch between the cards. For maintenance contracts, subscriptions and insurance where the choice really is between two.
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.
<!-- Twee pakketten naast elkaar kiezen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pvk"><div class="pvk__in">
<fieldset class="pvk__fs"><legend class="pvk__lg">Onderhoud cv-ketel, Installatiebedrijf Hoekstra Amersfoort</legend>
<div class="pvk__grid">
<label class="pvk__c"><input type="radio" name="pvk-p" value="basis" data-n="Basis" data-p="8.95">
<span class="pvk__top"><span class="pvk__n">Basis</span><span class="pvk__p"><b>€ 8,95</b> per maand</span></span>
<span class="pvk__ul"><span>Jaarlijkse onderhoudsbeurt</span><span>Storing: monteur binnen 24 uur</span><span class="pvk__dif">Voorrijkosten € 45 per storing</span><span class="pvk__dif">Onderdelen betaal je los</span></span></label>
<label class="pvk__c"><input type="radio" name="pvk-p" value="compleet" data-n="Compleet" data-p="15.95" checked>
<span class="pvk__top"><span class="pvk__n">Compleet</span><span class="pvk__p"><b>€ 15,95</b> per maand</span></span>
<span class="pvk__ul"><span>Jaarlijkse onderhoudsbeurt</span><span class="pvk__dif">Storing: monteur binnen 8 uur, ook in het weekend</span><span class="pvk__dif">Geen voorrijkosten</span><span class="pvk__dif">Onderdelen tot € 350 inbegrepen</span></span></label>
</div>
</fieldset>
<p class="pvk__diff" aria-live="polite"></p>
<button class="pvk__btn" type="button"></button>
</div></div>
</div>/* Twee pakketten naast elkaar kiezen · NedDev · eigen werk. */
.pvk{position:absolute;inset:0;overflow:auto;display:flex;padding:12px;box-sizing:border-box;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.pvk *,.pvk *::before,.pvk *::after{box-sizing:border-box}
.pvk__in{margin:auto;width:100%;max-width:440px}
.pvk__fs{border:0;margin:0;padding:0;min-width:0}
.pvk__lg{padding:0;margin-bottom:8px;font-size:14px;font-weight:700;line-height:1.3}
.pvk__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pvk__c{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 11px;background:#fff;border:1px solid rgba(10,10,10,.2);border-radius:8px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pvk__c:hover{border-color:#0a0a0a}
.pvk__c:has(input:checked){border-color:#0a0a0a;box-shadow:inset 0 0 0 2px #0a0a0a}
.pvk__c:has(input:focus-visible){outline:2px solid #F5480F;outline-offset:2px}
.pvk__c input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pvk__c::after{content:'';position:absolute;right:10px;top:11px;width:18px;height:18px;border:1.5px solid #6b6b6b;border-radius:50%;background:#fff;pointer-events:none}
.pvk__c:has(input:checked)::after{border-color:#0a0a0a;background:#0a0a0a;box-shadow:inset 0 0 0 4px #fff}
.pvk__top{display:flex;flex-direction:column;gap:1px;padding-right:24px}
.pvk__n{font-size:14px;font-weight:700}
.pvk__p{font-size:12.5px;color:#4a4a4a}
.pvk__p b{font-size:16px;color:#0a0a0a;font-weight:700}
.pvk__ul{display:grid;gap:4px;font-size:12px;line-height:1.35;color:#3a3a3a}
.pvk__ul span{padding-left:10px;position:relative}
.pvk__ul span::before{content:'';position:absolute;left:0;top:.5em;width:4px;height:4px;background:#a3a09a;border-radius:1px}
.pvk__ul .pvk__dif{color:#0a0a0a;font-weight:600}
.pvk__ul .pvk__dif::before{background:#F5480F}
.pvk__diff{margin:8px 0;font-size:12.5px;line-height:1.4;color:#3a3a3a}
.pvk__btn{width:100%;height:40px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13.5px 'Switzer',sans-serif;cursor:pointer;transition:background-color .15s}
.pvk__btn:hover{background:#2a2a2a}
.pvk__btn:active{transform:translateY(1px)}
.pvk__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pvk *{transition:none!important}}// Twee pakketten naast elkaar kiezen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.pvk');if(!w)return;
var sfx='-'+Math.random().toString(36).slice(2,7);w.querySelectorAll('input[type=radio]').forEach(function(r){r.name=r.name+sfx;});
var diff=w.querySelector('.pvk__diff'),btn=w.querySelector('.pvk__btn');
function eur(n){return '\u20ac\u00a0'+n.toFixed(2).replace('.',',');}
function upd(){var r=w.querySelector('input:checked'),n=r.getAttribute('data-n'),p=+r.getAttribute('data-p');
btn.textContent='Kies '+n+', '+eur(p)+' per maand';
diff.textContent=n==='Compleet'?'Voor '+eur(7)+' per maand meer dan Basis: storing binnen 8 uur, geen voorrijkosten en onderdelen tot \u20ac\u00a0350. Na twee storingen per jaar ben je goedkoper uit.':'Basis is '+eur(7)+' per maand goedkoper. Bij een storing betaal je \u20ac\u00a045 voorrijkosten plus onderdelen, en wacht je tot 24 uur.';}
w.querySelectorAll('input').forEach(function(r){r.addEventListener('change',upd);});
btn.addEventListener('click',function(){var n=w.querySelector('input:checked').getAttribute('data-n');btn.textContent=n+' gekozen, volgende stap: je adres';});
upd();
}
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 →