OTP input

A one-time code input with animated entry, paste, validation, and recovery states.

Stable

Enter the 6-digit code

We’ve sent a code to alex@example.com

Demo code 800813 · Any other code shows an error

Verification code

Enter 6 digits.

Implementation

1"use client";2 3import {4  useCallback,5  useEffect,6  useId,7  useLayoutEffect,8  useRef,9  useState,10} from "react";11 12type Phase = "idle" | "checking" | "success" | "error";13type Sweep = {14  id: number;15  tone: "paste" | "success";16  from: number;17  to: number;18};19 20export interface OtpInputProps {21  length?: number;22  label?: string;23  disabled?: boolean;24  autoFocus?: boolean;25  showReset?: boolean;26  validateCode?: (value: string) => boolean | Promise<boolean>;27  onComplete?: (value: string) => void;28  onValid?: (value: string) => void;