Anatomy

The screen is a single motion.div centered in a min-h-screen container. Inside, top to bottom: a circular icon badge (Mail from Lucide, accent-colored), the title h1, an optional subtitle and email address line, the OTP digit row, a full-width submit button, and a resend link. The digit row maps over a string array of length codeLength and renders one controlled text input per slot.

How it works

State is a string array, one slot per digit, all empty by default. handleChange filters non-numeric input with a regex test, writes the last typed character to the matching index, then moves focus to the next input via the ref array. handleKeyDown catches Backspace on an empty slot and moves focus one step back. The Framer Motion entry plays once on mount: opacity 0 to 1, y 20 to 0, over 600ms with a custom spring ease curve.

How to build it in React

1. Initialize digit state and refs

   Create a string array of empty slots equal to codeLength, then a parallel useRef array for the inputs. The refs let you call .focus() imperatively without managing a focus index in state.

   const [code, setCode] = useState<string[]>(
     Array.from({ length: codeLength }, () => "")
   );
   const inputRefs = useRef<(HTMLInputElement | null)[]>([]);

2. Handle digit entry with auto-advance

   On each change event, reject anything that is not a digit, take only the last character (handles paste of a single digit), update the array, then focus the next slot if one exists.

   function handleChange(index: number, value: string) {
     if (!/^d*$/.test(value)) return;
     const newCode = [...code];
     newCode[index] = value.slice(-1);
     setCode(newCode);
     if (value && index < codeLength - 1) {
       inputRefs.current[index + 1]?.focus();
     }
   }

3. Navigate backward on Backspace

   When the current slot is already empty and the user presses Backspace, move focus to the previous slot. This makes correction feel natural without extra state tracking.

   function handleKeyDown(index: number, e: React.KeyboardEvent) {
     if (e.key === "Backspace" && !code[index] && index > 0) {
       inputRefs.current[index - 1]?.focus();
     }
   }

4. Animate the card in with Framer Motion

   Wrap the container in a motion.div with initial opacity 0 and y 20, animate to opacity 1 and y 0, and pass a spring ease array. The animation plays once on mount and does not depend on interaction state.

   const ease: [number, number, number, number] = [0.16, 1, 0.3, 1];
   
   <motion.div
     initial={{ opacity: 0, y: 20 }}
     animate={{ opacity: 1, y: 0 }}
     transition={{ duration: 0.6, ease }}
   >

When to use it

Use this component wherever your auth flow includes email or phone verification: sign-up confirmation, two-factor authentication, or password-reset codes. It fits SaaS onboarding, fintech apps, and any product that needs to confirm device or address ownership. Skip it when your flow uses a magic link instead of a code; the multi-input pattern would be misleading with no digits to enter.

Used by

• Stripe, Uses a 6-digit OTP box row for two-factor authentication on the Dashboard login.
• GitHub, Presents a digit-box OTP input during 2FA setup and device verification.
• Linear, Email verification step uses a segmented numeric code field consistent with its minimal design system.
• Notion, Login confirmation via email sends a 6-digit code entered in a split-input UI.

FAQ