Skip to content
My Docs

OTP (One-Time Password)

El componente OTP (One-Time Password) permite a los usuarios ingresar códigos de verificación de un solo uso, típicamente recibidos por SMS o email. El componente muestra múltiples inputs individuales, uno por cada dígito del código.

Properties

Section titled “Properties”

Además de las propiedades comunes, el componente OTP acepta las siguientes propiedades específicas:

Basic Properties

Section titled “Basic Properties”
PropertyTypeRequiredDefaultDescription
type"otp"Yes-Especifica el tipo como OTP
lengthnumberNo6Número de dígitos del código OTP. Debe ser entre 4 y 10 (recomendado: 4-8)
schemaz.ZodTypeYes-Esquema Zod para validación. Debe validar la longitud exacta del código

Examples

Section titled “Examples”

Basic OTP

Section titled “Basic OTP”
Un campo OTP básico de 6 dígitos
basic-otp.tsx
import { createExampleForm } from "../createExampleForm";
import { z } from "zod";


export const BasicOTP = createExampleForm({
  formId: "basic-otp",
  fields: {
    code: {
      type: "otp",
      label: "Código de verificación",
      length: 6,
      schema: z.string().length(6, "El código debe tener 6 dígitos"),
      helperText: "Ingresa el código de 6 dígitos que recibiste por email",
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["code"],
    },
  },
});

Características

Section titled “Características”
  1. Inputs individuales: Cada dígito tiene su propio input
  2. Navegación automática: Al escribir un dígito, el foco se mueve automáticamente al siguiente
  3. Paste support: Los usuarios pueden pegar el código completo y se distribuirá automáticamente
  4. Backspace inteligente: Al presionar backspace en un input vacío, se mueve al anterior
  5. Validación de longitud: El esquema Zod debe validar la longitud exacta del código

Best Practices

Section titled “Best Practices”
  1. Longitud estándar: Usa 6 dígitos para códigos OTP (estándar más común)
  2. Validación estricta: Valida que el código tenga exactamente la longitud especificada
  3. Mensajes claros: Proporciona helperText explicando de dónde viene el código
  4. Tiempo de expiración: Considera añadir lógica de expiración en tu aplicación
  5. Reenvío: Proporciona opción para reenviar el código si es necesario

Ejemplo de Validación

Section titled “Ejemplo de Validación”
{
  type: "otp",
  label: "Código de verificación",
  length: 6,
  schema: z.string()
    .length(6, "El código debe tener exactamente 6 dígitos")
    .regex(/^\d+$/, "El código solo puede contener números")
}

Casos de Uso

Section titled “Casos de Uso”
  • Verificación de email: Códigos enviados por email para verificar direcciones
  • Autenticación de dos factores (2FA): Códigos generados por apps como Google Authenticator
  • Verificación SMS: Códigos enviados por mensaje de texto
  • Recuperación de contraseña: Códigos temporales para resetear contraseñas
  • Verificación de transacciones: Códigos de seguridad para operaciones sensibles

Accessibility

Section titled “Accessibility”
  • El campo OTP es automáticamente asociado con su etiqueta
  • Los mensajes de error son anunciados correctamente a los lectores de pantalla
  • El componente sigue las mejores prácticas de ARIA
  • La navegación por teclado está completamente soportada
  • El paste automático mejora la accesibilidad para usuarios con dificultades motoras

Notas Técnicas

Section titled “Notas Técnicas”
  • El valor del campo es un string con todos los dígitos concatenados
  • La longitud por defecto es 6, pero puedes configurarla entre 4 y 10
  • El componente usa input-otp internamente para el renderizado
  • Los inputs son de tipo text con maxLength={1} para cada uno

Next Steps

Section titled “Next Steps”