How to Build an OTP Input Component in an Interview

How to Build an OTP Input Component in an Interview

The OTP input is one of the most common machine coding questions. Here is how to build it in 90 minutes.

Requirements

• 4-6 input boxes for OTP digits.
• Auto-focus to the next box when a digit is entered.
• Backspace to go to the previous box.
• Only numeric input.
• Paste support (paste a full OTP).
• Submit when all boxes are filled.

Plan (5-10 minutes)

1. HTML: 4-6 <input> elements with maxlength="1".
2. State: an array of values.
3. Events: input (auto-focus next), keydown (backspace), paste.
4. UI: centered, spaced boxes, focused state styling.

Build Core (50 minutes)

HTML

<div class="otp-container">
  <input type="text" maxlength="1" class="otp-input" data-index="0" />
  <input type="text" maxlength="1" class="otp-input" data-index="1" />
  <input type="text" maxlength="1" class="otp-input" data-index="2" />
  <input type="text" maxlength="1" class="otp-input" data-index="3" />
</div>
<button id="submit">Verify OTP</button>

JavaScript (Core)

const inputs = document.querySelectorAll(".otp-input");

inputs.forEach((input, index) => {
  input.addEventListener("input", (e) => {
    const value = e.target.value.replace(/\D/g, ""); // numeric only
    e.target.value = value;
    if (value && index < inputs.length - 1) {
      inputs[index + 1].focus(); // auto-focus next
    }
  });

  input.addEventListener("keydown", (e) => {
    if (e.key === "Backspace" && !e.target.value && index > 0) {
      inputs[index - 1].focus(); // backspace to previous
    }
  });
});

Handle Edge Cases (20 minutes)

Paste Support

inputs.forEach((input, index) => {
  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;
      }
    });
    const nextIndex = Math.min(index + pasted.length, inputs.length - 1);
    inputs[nextIndex].focus();
  });
});
``
#### Submit When Filled

```js
function checkComplete() {
  const otp = Array.from(inputs).map((i) => i.value).join("");
  if (otp.length === inputs.length) {
    document.getElementById("submit").disabled = false;
  }
}
``
### CSS (10 minutes)

```css
.otp-container { display: flex; gap: 12px; justify-content: center; }
.otp-input {
  width: 48px; height: 56px; font-size: 24px; text-align: center;
  border: 2px solid #ccc; border-radius: 8px;
}
.otp-input:focus { border-color: #007bff; outline: none; }
``
### The Takeaway

Build the OTP input: HTML (4-6 inputs with maxlength=1), JavaScript (auto-focus next, backspace to previous, numeric only, paste support), CSS (flexbox, centered, focus styling). Handle edge cases (paste, submit when filled). This is a common machine coding question that tests DOM manipulation and event handling.