Free Component
Auto-Focus 6-Digit OTP Verification
An auto-advancing 6-digit one-time password (OTP) input component with backspace handling, paste support, and active focus rings.
Colours in this gradient
#0f172a#3b82f6#10b981#ffffff
background: ;The code
Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="otp-stage">
<div class="otp-card">
<div class="otp-icon">🔐</div>
<div class="otp-title">Enter Verification Code</div>
<div class="otp-desc">We sent a 6-digit security code to your email. Enter it below to authenticate.</div>
<div class="otp-inputs" id="otpGroup">
<input type="text" maxlength="1" inputmode="numeric" class="otp-box" autofocus />
<input type="text" maxlength="1" inputmode="numeric" class="otp-box" />
<input type="text" maxlength="1" inputmode="numeric" class="otp-box" />
<input type="text" maxlength="1" inputmode="numeric" class="otp-box" />
<input type="text" maxlength="1" inputmode="numeric" class="otp-box" />
<input type="text" maxlength="1" inputmode="numeric" class="otp-box" />
</div>
<button class="otp-btn" id="otpVerifyBtn">Verify & Proceed</button>
<div class="otp-resend">Didn't receive code? <a href="#">Resend (58s)</a></div>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.
Create a 6-digit OTP verification input component in HTML, CSS and vanilla JavaScript. Requirements: - 6 square input fields with inputmode="numeric". - Auto-advances focus to the next field as digits are typed. - Backspace jumps focus back to the preceding field when empty. - Full 6-digit clipboard paste support. - Glowing focus outline and verification action button. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Bind input event to shift focus forward on value entry.
- 2
Handle keydown Backspace to shift focus backwards.
- 3
Handle paste event to distribute 6 copied numbers across all fields.
Customisation tips
- Set inputmode='numeric' to prompt the numeric keypad on mobile devices.