BrutalLab UI
es
EnglishEspañol
PrimitiveDisponible

Input OTP

Entrada accesible presentada como grupos de casillas de verificación.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/input-otp.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx
'use client';

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from '@/components/ui/input-otp';
import { Label } from '@/components/ui/label';

export default function Demo() {
  return (
    <div className="grid gap-3">
      <Label htmlFor="verification-code">Verification code</Label>
      <InputOTP
        id="verification-code"
        maxLength={6}
        inputMode="numeric"
        pattern="^[0-9]+$"
        autoComplete="one-time-code"
      >
        <InputOTPGroup>
          {[0, 1, 2].map((index) => (
            <InputOTPSlot key={index} index={index} />
          ))}
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          {[3, 4, 5].map((index) => (
            <InputOTPSlot key={index} index={index} />
          ))}
        </InputOTPGroup>
      </InputOTP>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

  • Reposo, contenido, foco, error y deshabilitado. El error usa aria-invalid y un mensaje asociado; el color no es la única señal.
  • No se valida por pasar el cursor. Solo la aplicación decide cuándo mostrar errores.
  • Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

PropTipoDefaultDescripción
maxLengthnumber—Required number of characters.
patternstring—Allowed input characters.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.