Kleurkiezer met stalen en eigen kleur New

Colour choice for a product with fixed swatches (colour name and RAL code) plus a slot for a custom colour via the system colour picker or a hex code. The preview (a window frame) recolours instantly, the price adjusts for custom mixing and the hex code is validated. The swatches are real radio buttons: arrow keys work and screen readers read the colour name. For paint, furniture, curtains and window frames.

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.

<!-- Kleurkiezer met stalen en eigen kleur · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kks"><div class="kks__in">
<div class="kks__pv" aria-hidden="true"><svg viewBox="0 0 100 120"><rect class="kks__fr" x="6" y="6" width="88" height="108" rx="2"/><rect x="16" y="16" width="68" height="42" fill="#cfe0e8"/><rect x="16" y="66" width="68" height="38" fill="#cfe0e8"/><path d="M16 16l30 0-30 30z" fill="#e4eef2"/><path d="M16 66l24 0-24 22z" fill="#e4eef2"/></svg></div>
<div class="kks__ctl">
<p class="kks__prod">Buitenlak voor kozijnen, 750 ml</p>
<fieldset class="kks__fs"><legend class="kks__lg">Kleur: <span class="kks__name">Grachtengroen, RAL 6009</span></legend>
<div class="kks__sw">
<label class="kks__s" style="--c:#27352a"><input type="radio" name="kks-c" value="#27352a" data-n="Grachtengroen, RAL 6009" checked><span class="kks__vh">Grachtengroen</span></label>
<label class="kks__s" style="--c:#383e42"><input type="radio" name="kks-c" value="#383e42" data-n="Antraciet, RAL 7016"><span class="kks__vh">Antraciet</span></label>
<label class="kks__s" style="--c:#e8dfcd"><input type="radio" name="kks-c" value="#e8dfcd" data-n="Crèmewit, RAL 9001"><span class="kks__vh">Crèmewit</span></label>
<label class="kks__s" style="--c:#5c2027"><input type="radio" name="kks-c" value="#5c2027" data-n="Ossenbloed, RAL 3005"><span class="kks__vh">Ossenbloed</span></label>
<label class="kks__s" style="--c:#24364b"><input type="radio" name="kks-c" value="#24364b" data-n="Staalblauw, RAL 5011"><span class="kks__vh">Staalblauw</span></label>
<label class="kks__s kks__s--eigen"><input type="radio" name="kks-c" value="eigen" data-n="Eigen kleur"><span class="kks__vh">Eigen kleur</span><span class="kks__plus" aria-hidden="true"></span></label>
</div></fieldset>
<div class="kks__own" hidden>
<label class="kks__pick"><input class="kks__col" type="color" value="#b5651d" aria-label="Kies een eigen kleur"></label>
<label class="kks__hexl"><span class="kks__vh">Hexcode</span><input class="kks__hex" type="text" value="#b5651d" maxlength="7" spellcheck="false" aria-describedby="kks-he"></label>
<p class="kks__err" id="kks-he"></p>
</div>
<div class="kks__buy"><span class="kks__price" aria-live="polite">&euro; 32,95</span><button class="kks__btn" type="button">In winkelwagen</button></div>
</div>
</div></div>
</div>

/* Kleurkiezer met stalen en eigen kleur · NedDev · eigen werk. */
.kks{position:absolute;inset:0;overflow:auto;display:flex;padding:12px;box-sizing:border-box;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.kks *,.kks *::before,.kks *::after{box-sizing:border-box}
.kks [hidden]{display:none!important}
.kks__in{margin:auto;width:100%;max-width:400px;display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;padding:14px}
.kks__pv svg{display:block;width:100%;height:auto}
.kks__fr{fill:var(--kks,#27352a);transition:fill .3s ease}
.kks__ctl{min-width:0}
.kks__prod{margin:0 0 6px;font-size:14px;font-weight:700}
.kks__fs{border:0;margin:0;padding:0;min-width:0}
.kks__lg{padding:0;font-size:12.5px;color:#4a4a4a;margin-bottom:6px}
.kks__name{color:#0a0a0a;font-weight:600}
.kks__sw{display:flex;flex-wrap:wrap;gap:6px}
.kks__s{position:relative;width:30px;height:30px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(10,10,10,.18);cursor:pointer;transition:transform .15s}
.kks__s:hover{transform:translateY(-1px)}
.kks__s input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.kks__s:has(input:checked)::after{content:'';position:absolute;inset:-4px;border:2px solid #0a0a0a;border-radius:6px}
.kks__s:has(input:focus-visible)::before{content:'';position:absolute;inset:-7px;border:2px solid #F5480F;border-radius:8px}
.kks__s--eigen{background:#fff;box-shadow:inset 0 0 0 1px #8c8c8c}
.kks__plus::before,.kks__plus::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:#0a0a0a}
.kks__plus::after{transform:rotate(90deg)}
.kks__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kks__own{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.kks__pick{display:block;width:34px;height:34px;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px #8c8c8c;flex:none}
.kks__col{display:block;width:44px;height:44px;margin:-5px;padding:0;border:0;cursor:pointer;background:none}
.kks__col:focus-visible{outline:2px solid #F5480F}
.kks__pick:has(.kks__col:focus-visible){box-shadow:0 0 0 2px #F5480F}
.kks__hex{width:92px;height:34px;padding:0 8px;font:500 14px 'Switzer',sans-serif;color:#0a0a0a;border:1px solid #8c8c8c;border-radius:4px}
.kks__hex:focus-visible{outline:none;border-color:#0a0a0a;box-shadow:0 0 0 3px rgba(245,72,15,.35)}
.kks__hex[aria-invalid="true"]{border-color:#B42318}
.kks__err{flex-basis:100%;margin:0;font-size:12.5px;color:#4a4a4a}
.kks__err.is-bad{color:#B42318}
.kks__err:empty{display:none}
.kks__buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.kks__price{font-size:15px;font-weight:700}
.kks__btn{height:36px;padding:0 14px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13.5px 'Switzer',sans-serif;cursor:pointer;transition:background-color .15s}
.kks__btn:hover{background:#2a2a2a}
.kks__btn:active{transform:translateY(1px)}
.kks__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (max-width:420px){.kks__in{grid-template-columns:64px 1fr;gap:10px;padding:12px}}
@media (prefers-reduced-motion:reduce){.kks *{transition:none!important}}

// Kleurkiezer met stalen en eigen kleur · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.kks');if(!w)return;
var sfx='-'+Math.random().toString(36).slice(2,7);
w.querySelectorAll('[id]').forEach(function(el){el.id=el.id+sfx;});
w.querySelectorAll('[aria-describedby]').forEach(function(el){el.setAttribute('aria-describedby',el.getAttribute('aria-describedby')+sfx);});
w.querySelectorAll('input[type=radio]').forEach(function(r){r.name=r.name+sfx;});
var nm=w.querySelector('.kks__name'),own=w.querySelector('.kks__own'),col=w.querySelector('.kks__col'),hex=w.querySelector('.kks__hex'),he=w.querySelector('.kks__err'),pr=w.querySelector('.kks__price'),btn=w.querySelector('.kks__btn'),eig=w.querySelector('.kks__s--eigen');
function setC(c){w.style.setProperty('--kks',c);}
function eigen(c){eig.style.background=c;eig.querySelector('.kks__plus').style.display='none';nm.textContent='Eigen kleur '+c.toUpperCase()+', op maat gemengd';he.textContent='Mengen op maat kost \u20ac\u00a04,00 extra en duurt 1 werkdag langer.';he.classList.remove('is-bad');}
w.querySelectorAll('input[type=radio]').forEach(function(r){r.addEventListener('change',function(){btn.textContent='In winkelwagen';
 if(r.value==='eigen'){own.hidden=false;setC(col.value);eigen(col.value);pr.textContent='\u20ac\u00a036,95';}
 else{own.hidden=true;setC(r.value);nm.textContent=r.getAttribute('data-n');pr.textContent='\u20ac\u00a032,95';}});});
col.addEventListener('input',function(){hex.value=col.value;hex.removeAttribute('aria-invalid');setC(col.value);eigen(col.value);});
hex.addEventListener('input',function(){var v=hex.value.trim();if(v&&v[0]!=='#')v='#'+v;
 if(/^#[0-9a-f]{6}$/i.test(v)){hex.removeAttribute('aria-invalid');col.value=v.toLowerCase();setC(v);eigen(v);}
 else if(v.length>=7){hex.setAttribute('aria-invalid','true');he.textContent='Gebruik zes tekens na het hekje, bijvoorbeeld #B5651D';he.classList.add('is-bad');}});
btn.addEventListener('click',function(){btn.textContent='Toegevoegd';});
setC('#27352a');
}
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 →