→ MD. Tayyub
→ OTP Verification Form

OTP Verification Form

A secure and user-friendly OTP verification form component for confirming user identity and enabling password resets. Ideal for authentication flows.

This Example is contributed by MD. Tayyub, on 15-Feb-2025. It is responsive.

Authentication OTP Input Verification Form Form Autofocus

Author MD. Tayyub

Fork Fullscreen

<div class="otp-form-container">
  <h2>Enter Verification Code</h2>
  <p>Please enter the 6-digit code sent to your email.</p>
  <form id="otp-form">
    <div class="otp-input-group">
      <input type="text" class="otp-input" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-index="0">
      <input type="text" class="otp-input" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-index="1">
      <input type="text" class="otp-input" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-index="2">
      <input type="text" class="otp-input" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-index="3">
      <input type="text" class="otp-input" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-index="4">
      <input type="text" class="otp-input" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-index="5">
    </div>
    <button type="submit" class="otp-submit-button">Verify</button>
    <p class="otp-resend-text">Didn't receive the code? <a href="#" id="resend-otp">Resend Code</a></p>
  </form>
</div>

Related Examples