OTP Input — Free HTML CSS JS 6-Digit Code Snippet

An OTP (one-time password) or PIN input is a row of individual character boxes used for verification codes, 2FA authentication, and payment PINs — see the full OTP verification flow and the keypad-style PIN pad, or skip codes entirely with a magic link. Each box accepts one character and the cursor automatically moves to the next box after input. This snippet implements the complete interaction: auto-focus advance, paste-to-fill, backspace-to-previous, and a filled box highlight.

Auto-focus advance

The input event listener strips non-digit characters with inp.value = inp.value.replace(/\D/g, ''), then checks if (inp.value && i < inputs.length - 1) inputs[i + 1].focus(). Replacing non-digits means letters and symbols are silently rejected — only numbers pass. Auto-advancing after the digit is entered means users never need to click the next box.

Paste-to-fill

The paste event handler prevents the default paste (which would place all text in one box), extracts the clipboard text, strips non-digits, slices to the number of inputs, and distributes each character to the corresponding input: paste.split('').forEach((ch, j) => { if (inputs[j]) { inputs[j].value = ch; inputs[j].classList.add('filled'); } }). Focus moves to the box after the last filled character.

Backspace navigation

The keydown listener checks if (e.key === 'Backspace' && !inp.value && i > 0) inputs[i - 1].focus(). If Backspace is pressed on an empty box, focus moves back to the previous box. If the box has a value, the default behaviour clears it without moving focus — the user can then press Backspace again to go back.

The filled highlight

.otp input.filled { border-color: #6366f1; background: #eef2ff; } gives filled boxes a visible indicator that they contain a value. The class is added on input and removed if the value is cleared.

Verification

The verify() function joins all input values and checks if the length equals 6. Replace the alert with your API verification call.

Auto-advance focus

On each input event, if the current input has a value (exactly one digit), focus() moves to the next input: inputs[i+1].focus(). This creates the auto-advance experience users expect from OTP fields. The input uses maxlength="1" to limit entry to one character. On input, the current value is sanitised to only digits: input.value = input.value.replace(/D/g, '').slice(-1) — the slice(-1) keeps only the last entered character in case the browser's input event fires with multiple characters.

Paste handling

A paste event listener on the first input (or any input) reads e.clipboardData.getData('text') and distributes the pasted characters across all inputs: pastedText.split('').forEach((char, i) => { if (inputs[i]) inputs[i].value = char; }). Focus moves to the last filled input or the first empty one after paste. This is the critical OTP UX feature — paste an SMS code and the entire field fills instantly.

Backspace navigation

A keydown listener on each input checks for Backspace. If the current input is already empty and Backspace is pressed, focus moves to the previous input: inputs[i-1].focus(). This allows the user to correct a mistake without clicking the previous box.