OTP Input Interview Tips and Tricks

OTP Input Interview Tips and Tricks

Here are tips for building the OTP input in a machine coding interview and impressing the interviewer.

Start With the Core

1. Create 4-6 input elements with maxlength="1".
2. Add auto-focus to the next input on digit entry.
3. Add backspace to go to the previous input.

These three features are the minimum. Get them working first.

Add Paste Support

Paste support is often forgotten. Implementing it shows attention to detail:

input.addEventListener("paste", (e) => {
  e.preventDefault();
  const pasted = e.clipboardData.getData("text").replace(/\D/g, "");
  pasted.split("").forEach((char, i) => {
    if (index + i < inputs.length) inputs[index + i].value = char;
  });
  inputs[Math.min(index + pasted.length, inputs.length - 1)].focus();
});
``
### Add Numeric-Only Filter

```js
e.target.value = e.target.value.replace(/\D/g, "");
``
This prevents letters and special characters. Shows you thought about validation.

### Add Completion Detection

```js
function checkComplete() {
  const otp = Array.from(inputs).map((i) => i.value).join("");
  verifyBtn.disabled = otp.length !== inputs.length;
}
``
Enable the verify button only when all inputs are filled.

### Add CSS

```css
.otp-container { display: flex; gap: 12px; }
.otp-input { width: 50px; height: 60px; font-size: 24px; text-align: center; border: 2px solid #ccc; border-radius: 8px; }
.otp-input:focus { border-color: #007bff; }
``
Basic CSS makes it look professional. Focus styling is important.

### Bonus Features (If Time Permits)

1. Arrow key navigation.
2. Error state (red border on invalid OTP).
3. Resend OTP with a countdown timer.
4. Auto-fill from SMS (`autocomplete="one-time-code"`).
5. Accessibility (aria-label, role).

### Common Mistakes to Avoid

1. Forgetting paste support.
2. Not handling backspace on empty inputs.
3. Allowing non-numeric input.
4. No focus styling.
5. Not testing with keyboard only.

### The Takeaway

Impress with the OTP input: build core first (auto-focus, backspace), add paste support (often forgotten), add numeric filter, add completion detection, add CSS, and add bonus features (arrow keys, error state, resend, accessibility) if time permits. Avoid common mistakes (no paste, no backspace, no filter, no CSS).