UI Components Easy

Verify Email

Email verification page with 6-digit OTP input, auto-advance focus, paste support, resend countdown, and success animation. No dependencies.

Open in Lab

css vanilla-js

Targets: JS HTML

Code

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

:root {
  --bg: #0f1117;
  --surface: #16181f;
  --surface2: #1e2130;
  --border: #2a2d3a;
  --text: #e2e8f0;
  --text-muted: #64748b;
  --accent: #818cf8;
  --accent-hover: #a5b4fc;
  --red: #f87171;
  --green: #34d399;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-center {
  width: 100%;
  display: grid;
  place-items: center;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
}

.auth-logo {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
  text-decoration: none;
  display: block;
  margin-bottom: 28px;
}

.auth-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: rgba(129, 140, 248, 0.1);
  border: 1px solid rgba(129, 140, 248, 0.2);
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 20px;
}

.auth-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* OTP */
.otp-wrap {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}

.otp-input {
  width: 48px;
  height: 58px;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
  caret-color: var(--accent);
}

.otp-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

.otp-input.filled {
  border-color: rgba(129, 140, 248, 0.5);
}

.otp-input.error {
  border-color: var(--red);
  animation: shake .4s;
}

@keyframes shake {
  0%,
  100% {
    transform: none;
  }

  20%,
  60% {
    transform: translateX(-5px);
  }

  40%,
  80% {
    transform: translateX(5px);
  }
}

.otp-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 16px;
}

.field-error {
  font-size: 0.78rem;
  color: var(--red);
  text-align: center;
  margin-bottom: 4px;
}

.auth-submit {
  width: 100%;
  background: var(--accent);
  border: none;
  border-radius: 9px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 11px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, opacity .15s;
  text-decoration: none;
  margin-top: 4px;
}

.auth-submit:hover {
  background: var(--accent-hover);
}

.auth-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-spinner svg {
  animation: spin .8s linear infinite;
}

.auth-switch {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.resend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: inherit;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.link-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Success */
.success-anim {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}

.success-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--green);
  animation: ringPop .5s ease forwards;
}

@keyframes ringPop {
  from {
    transform: scale(0.5);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.success-check {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: var(--green);
  animation: checkIn .4s .3s ease both;
}

@keyframes checkIn {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

const inputs = [...document.querySelectorAll(".otp-input")];
const verifyBtn = document.getElementById("verifyBtn");
const resendBtn = document.getElementById("resendBtn");
const otpError = document.getElementById("otp-error");
const CORRECT = "123456";

// Input management
inputs.forEach((input, i) => {
  input.addEventListener("input", () => {
    const val = input.value.replace(/\D/g, "");
    input.value = val;
    input.classList.toggle("filled", !!val);

    if (val && i < inputs.length - 1) inputs[i + 1].focus();
    checkComplete();
  });

  input.addEventListener("keydown", (e) => {
    if (e.key === "Backspace" && !input.value && i > 0) {
      inputs[i - 1].focus();
      inputs[i - 1].value = "";
      inputs[i - 1].classList.remove("filled");
    }
  });
});

// Paste handler
inputs[0].addEventListener("paste", (e) => {
  e.preventDefault();
  const text = (e.clipboardData || window.clipboardData)
    .getData("text")
    .replace(/\D/g, "")
    .slice(0, 6);
  text.split("").forEach((ch, i) => {
    if (inputs[i]) {
      inputs[i].value = ch;
      inputs[i].classList.add("filled");
    }
  });
  checkComplete();
  const lastFilled = Math.min(text.length, inputs.length - 1);
  inputs[lastFilled].focus();
});

function checkComplete() {
  const code = inputs.map((i) => i.value).join("");
  verifyBtn.disabled = code.length < 6;
}

// Verify
verifyBtn?.addEventListener("click", async () => {
  const code = inputs.map((i) => i.value).join("");
  verifyBtn.disabled = true;
  verifyBtn.querySelector(".btn-text").hidden = true;
  verifyBtn.querySelector(".btn-spinner").hidden = false;

  await new Promise((r) => setTimeout(r, 1000));

  if (code === CORRECT) {
    document.getElementById("verifyState").hidden = true;
    document.getElementById("successState").hidden = false;
  } else {
    inputs.forEach((i) => i.classList.add("error"));
    otpError.textContent = "Incorrect code. Please try again.";
    otpError.hidden = false;
    setTimeout(() => {
      inputs.forEach((i) => {
        i.classList.remove("error");
        i.value = "";
        i.classList.remove("filled");
      });
      otpError.hidden = true;
      inputs[0].focus();
    }, 600);
    verifyBtn.querySelector(".btn-text").hidden = false;
    verifyBtn.querySelector(".btn-spinner").hidden = true;
    verifyBtn.disabled = true;
  }
});

// Resend countdown
function startCountdown(secs) {
  let n = secs;
  const countEl = document.getElementById("countdown");
  resendBtn.disabled = true;
  const t = setInterval(() => {
    n--;
    countEl.textContent = n;
    if (n <= 0) {
      clearInterval(t);
      resendBtn.disabled = false;
      resendBtn.innerHTML = "Resend code";
    }
  }, 1000);
}
startCountdown(60);
resendBtn?.addEventListener("click", () => {
  resendBtn.innerHTML = 'Resend (<span id="countdown">60</span>s)';
  startCountdown(60);
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Verify Email</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>

    <div class="auth-center">
        <div class="auth-card">

            <a href="#" class="auth-logo">✦ StealThis</a>

            <!-- ── Verify state ── -->
            <div id="verifyState">
                <div class="auth-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="1.8">
                        <rect x="2" y="4" width="20" height="16" rx="2" />
                        <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
                    </svg>
                </div>

                <h1 class="auth-title">Check your inbox</h1>
                <p class="auth-subtitle">
                    We sent a 6-digit code to<br />
                    <strong>alex@stealthis.dev</strong>
                </p>

                <div class="otp-wrap" id="otpWrap">
                    <input type="text" inputmode="numeric" maxlength="1" class="otp-input" aria-label="Digit 1" />
                    <input type="text" inputmode="numeric" maxlength="1" class="otp-input" aria-label="Digit 2" />
                    <input type="text" inputmode="numeric" maxlength="1" class="otp-input" aria-label="Digit 3" />
                    <input type="text" inputmode="numeric" maxlength="1" class="otp-input" aria-label="Digit 4" />
                    <input type="text" inputmode="numeric" maxlength="1" class="otp-input" aria-label="Digit 5" />
                    <input type="text" inputmode="numeric" maxlength="1" class="otp-input" aria-label="Digit 6" />
                </div>

                <p class="otp-hint">Demo code: <strong>123456</strong></p>

                <p class="field-error" id="otp-error" role="alert" hidden></p>

                <button class="auth-submit" id="verifyBtn" disabled>
                    <span class="btn-text">Verify email</span>
                    <span class="btn-spinner" hidden>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2.5">
                            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
                        </svg>
                    </span>
                </button>

                <p class="auth-switch resend-row">
                    Didn't get a code?
                    <button type="button" class="link-btn" id="resendBtn" disabled>
                        Resend (<span id="countdown">60</span>s)
                    </button>
                </p>
            </div>

            <!-- ── Success state ── -->
            <div id="successState" hidden>
                <div class="success-anim">
                    <div class="success-ring"></div>
                    <div class="success-check">✓</div>
                </div>
                <h1 class="auth-title">Email verified!</h1>
                <p class="auth-subtitle">Your account is now active. Welcome to StealThis!</p>
                <a href="#" class="auth-submit">Go to dashboard</a>
            </div>

        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

Verify Email

An email verification page with 6-digit OTP code input boxes, auto-advance focus between digits, paste support, backspace handling, resend timer, and an animated success state.

Features

6 individual single-digit input boxes with outlined focus ring
Auto-advances focus to next box on digit entry
Backspace moves focus to previous box
Full paste support — pastes across all 6 boxes
Resend code link with 60-second countdown
Verify button activates when all 6 digits are filled
Animated success check with confetti burst on correct code
Error shake animation on wrong code

How it works

Six <input maxlength="1"> boxes — keydown / input events manage focus navigation
paste event listener splits clipboard text across boxes
verify() checks a code (demo: 123456) and toggles success or error CSS class
startCountdown() manages the resend timer with setInterval