proNew200 lines · framer-motion

Auth OTP Code

Six boxes, auto-advance, paste the whole code at once. A one-time-code entry screen: six separate digit boxes with auto-advance on type, backspace-to-previous, full-code paste support, a resend cooldown timer, and a styled success state once all six digits are in — no network.

Use it for: A two-factor or email-verification step in a sign-up or sign-in flow, demoed end to end without a real SMS or email provider behind it.
Themes: Light + dark
License: Commercial use

Live

Verify it's you

Enter the code

We sent a 6-digit code to your email.

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export interface AuthOtpCodeProps {
  eyebrow?: string;
  title?: string;
  subcopy?: string;
  length?: number;
  resendSeconds?: number;
  successTitle?: string;
  successBody?: string;
  className?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Typing a digit auto-advances focus to the next box; backspace on an empty box moves focus back and clears the previous digit.
→Pasting a full code splits it across all boxes in one action and focuses the last filled box (or the final box if the paste is longer).
→The code auto-verifies the instant all boxes are filled, whether by typing or pasting; the Verify button is there for anyone who prefers to confirm explicitly.
→Clicking Verify before all boxes are filled shows an inline 'enter all N digits' message instead of submitting early.
→Resend is disabled behind a visible countdown and only re-enables once it reaches zero.

Accessibility

✓Each box is a real input with its own `aria-label` ('Digit 1 of 6', etc.) and `inputmode="numeric"` for the right mobile keyboard.
✓The first box carries `autocomplete="one-time-code"` so password managers and SMS autofill can target it.
✓The success panel has `role="status"` and `aria-live="polite"`.
✓Honours prefers-reduced-motion.