OTP Pin Input

<!-- OTP Pin Input · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="otp-wrap"><input class="otp-box" maxlength="1" inputmode="numeric"><input class="otp-box" maxlength="1" inputmode="numeric"><input class="otp-box" maxlength="1" inputmode="numeric"><input class="otp-box" maxlength="1" inputmode="numeric"><input class="otp-box" maxlength="1" inputmode="numeric"><input class="otp-box" maxlength="1" inputmode="numeric"></div>
</div>

/* OTP Pin Input · NedDev · eigen werk. */
.otp-wrap{display:flex;gap:10px;font-family:'Switzer',sans-serif}
.otp-box{width:46px;height:56px;text-align:center;font-size:24px;font-weight:600;color:#0a0a0a;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:10px;outline:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.otp-box:focus{border-color:#F5480F;box-shadow:0 0 0 3px rgba(245,72,15,.15)}
.otp-box.otp-filled{border-color:#0a0a0a;transform:translateY(-2px)}

// OTP Pin Input · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.otp-wrap')||root;var bx=[].slice.call(root.querySelectorAll('.otp-box'));bx.forEach(function(b,i){b.addEventListener('input',function(){b.value=b.value.replace(/\D/g,'');b.classList.toggle('otp-filled',!!b.value);if(b.value&&bx[i+1])bx[i+1].focus();});b.addEventListener('keydown',function(e){if(e.key==='Backspace'&&!b.value&&bx[i-1])bx[i-1].focus();});b.addEventListener('paste',function(e){e.preventDefault();var d=(e.clipboardData.getData('text')||'').replace(/\D/g,'').slice(0,bx.length);d.split('').forEach(function(c,k){if(bx[k]){bx[k].value=c;bx[k].classList.add('otp-filled');}});if(bx[d.length-1])bx[Math.min(d.length,bx.length-1)].focus();});});
}
init(document.querySelector('.jouw-container'));