OTP Input Component: Complete Checklist

OTP Input Component: Complete Checklist

Here is the complete checklist for building an OTP input in a machine coding interview.

Core Features

• 4-6 input elements with maxlength="1".
• Auto-focus to the next input on digit entry.
• Backspace to the previous input (when current is empty).
• Only numeric input (regex filter).
• Verify button (enabled when all inputs are filled).

Advanced Features

• Paste support (fill multiple inputs from clipboard).
• Arrow key navigation (left/right).
• Enter key to submit when complete.
• Error state (red border on invalid OTP).
• Clear inputs on error and focus the first.
• Resend OTP with countdown timer.

Accessibility

• role="group" and aria-label on the container.
• aria-label="Digit N" on each input.
• inputmode="numeric" for mobile numeric keyboard.
• autocomplete="one-time-code" for iOS auto-fill.
• Focus the first input on page load.
• Screen reader announcements (aria-live).

CSS

• Flexbox layout (horizontal, gap between inputs).
• Fixed width and height for each input.
• Large font size (24px+) for digits.
• Center-aligned text.
• Border and border-radius.
• Focus styling (border color, box-shadow).
• Error styling (red border).

Testing

• Test: type digits (auto-focus works).
• Test: backspace (goes to previous).
• Test: paste (fills all inputs).
• Test: non-numeric input (filtered out).
• Test: arrow keys (navigation works).
• Test: verify button (enables when complete).
• Test: keyboard only (no mouse).
• Test: mobile (numeric keyboard shows).

Time Allocation

• Core: 40 minutes.
• Advanced: 20 minutes.
• CSS: 10 minutes.
• Testing: 10 minutes.
• Buffer: 10 minutes.

The Takeaway

Checklist: core (auto-focus, backspace, numeric, verify button), advanced (paste, arrows, error, resend), accessibility (ARIA, inputmode, autocomplete), CSS (flexbox, focus styling), and testing (all features and keyboard). Time: 40 min core, 20 min advanced, 10 min CSS, 10 min testing.