Back to Snippets

Animated OTP Input Sequence JS

Streamline two-factor authentication with this animated OTP sequence. The inputs auto-advance seamlessly as you type, gracefully handle pasting, and trigger a satisfying success glow upon completion.

#javascript

#css

#otp

#input

#authentication

#form

#focus

#animation

#security

/HTML *CSS ()JS Output Live Updates

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.auth-card {
  background: #ffffff;
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
  max-width: 450px;
  transition: box-shadow 0.4s ease;
}

.auth-card.success-state {
  box-shadow: 0 0 50px rgba(16, 185, 129, 0.4);
}

.auth-card h2 {
  color: #0f172a;
  margin: 0 0 10px 0;
  font-size: 1.75rem;
}

.auth-card p {
  color: #64748b;
  margin-bottom: 30px;
}

.otp-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.otp-box {
  width: 50px;
  height: 60px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: #0f172a;
  background: #f8fafc;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  outline: none;
}

.otp-box:focus {
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.success-state .otp-box {
  border-color: #10b981;
  color: #10b981;
  background: #f0fdf4;
}

.verify-btn {
  width: 100%;
  background: #0f172a;
  color: #ffffff;
  border: none;
  padding: 16px;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.verify-btn:hover {
  background: #1e293b;
}

.success-state .verify-btn {
  background: #10b981;
}

const inputs = document.querySelectorAll(".otp-box");
const card = document.querySelector(".auth-card");

for (let i = 0; i < inputs.length; i++) {
  const currentInput = inputs.item(i);
  
  /* Auto advance when typing */
  currentInput.addEventListener("input", function(e) {
    if (currentInput.value !== "" && i < inputs.length - 1) {
      inputs.item(i + 1).focus();
    }
    checkSuccess();
  });
  
  /* Handle Backspace nicely */
  currentInput.addEventListener("keydown", function(e) {
    if (e.key === "Backspace" && currentInput.value === "" && i > 0) {
      inputs.item(i - 1).focus();
    }
  });
  
  /* Handle Pasting securely without regex or array brackets */
  currentInput.addEventListener("paste", function(e) {
    e.preventDefault();
    const pasteData = e.clipboardData.getData("text").trim();
    
    for (let j = 0; j < pasteData.length; j++) {
      if (i + j < inputs.length) {
        inputs.item(i + j).value = pasteData.charAt(j);
      }
    }
    
    /* Focus the last filled input safely */
    const targetIndex = Math.min(i + pasteData.length, inputs.length) - 1;
    inputs.item(targetIndex).focus();
    
    checkSuccess();
  });
}

Animated OTP Input Sequence JS

Share Code Snippet