Anatomía

La pantalla es una única motion.div centrada en un contenedor min-h-screen. De arriba abajo: una insignia circular con icono (Mail de Lucide, con color de acento), el título h1, una línea opcional de subtítulo y dirección de email, la fila de dígitos OTP, un botón de envío a todo el ancho y un enlace de reenvío. La fila de dígitos recorre un array de strings de longitud codeLength y renderiza un input de texto controlado por casilla.

Cómo funciona

El estado es un array de strings, una casilla por dígito, todas vacías por defecto. handleChange filtra la entrada no numérica con un test de regex, escribe el último carácter tecleado en el índice correspondiente y luego mueve el focus al input siguiente mediante el array de refs. handleKeyDown detecta Backspace en una casilla vacía y retrocede el focus un paso. La animación de entrada Framer Motion se ejecuta una vez al montar: opacity de 0 a 1, y de 20 a 0, durante 600ms con una curva ease spring personalizada.

Cómo crearlo en React

1. Inicializar el estado de los dígitos y las refs

   Crea un array de strings vacíos de longitud codeLength y luego un array useRef paralelo para los inputs. Las refs te permiten llamar a .focus() de forma imperativa sin gestionar un índice de focus en el estado.

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

2. Gestionar la entrada con avance automático

   En cada evento change, rechaza todo lo que no sea un dígito, conserva solo el último carácter (gestiona el pegado de un único dígito), actualiza el array y luego pasa el focus a la casilla siguiente si existe.

   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. Retroceder con Backspace

   Cuando la casilla actual ya está vacía y el usuario pulsa Backspace, mueve el focus a la casilla anterior. Así la corrección resulta natural sin necesidad de un seguimiento de estado adicional.

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

4. Animar la entrada de la tarjeta con Framer Motion

   Envuelve el contenedor en una motion.div con opacity 0 e y 20 como valores iniciales, anímala hacia opacity 1 e y 0, y pásale un array ease spring. La animación se ejecuta una vez al montar y no depende del estado de interacción.

   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 }}
   >

Cuándo usarlo

Usa este componente allí donde tu flujo de auth incluya verificación por email o teléfono: confirmación de registro, autenticación de dos factores o códigos de restablecimiento de contraseña. Encaja en el onboarding SaaS, las apps fintech y cualquier producto que necesite confirmar la propiedad de un dispositivo o una dirección. Evítalo si tu flujo usa un magic link en lugar de un código; el patrón multicasilla resultaría engañoso al no haber dígitos que introducir.

Usado por

• Stripe, Usa una fila de casillas OTP de 6 dígitos para la autenticación de dos factores en el inicio de sesión del Dashboard.
• GitHub, Presenta un campo OTP de casillas separadas durante la configuración del 2FA y la verificación de dispositivos.
• Linear, El paso de verificación por email usa un campo numérico segmentado, coherente con su design system minimalista.
• Notion, La confirmación de inicio de sesión por email envía un código de 6 dígitos que se introduce en una interfaz de inputs separados.

FAQ