InputOTP

Campo especializado para códigos de un solo uso (OTP, 2FA, PIN).

---

Import

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from '@imansi/ui';

---

Uso básico

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

---

Con separador

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

---

Con patrón numérico

<InputOTP
  maxLength={6}
  pattern="^[0-9]+$"
  value={codigo}
  onChange={setCodigo}
>
  {/* slots */}
</InputOTP>

---

Con callback al completar

<InputOTP
  maxLength={6}
  onComplete={(codigo) => verificar2FA(codigo)}
>
  {/* slots */}
</InputOTP>

---

Props

InputOTP

Prop	Tipo	Default	Descripción
maxLength	number	—	Cantidad de dígitos
value	string	—	Valor controlado
onChange	(value: string) => void	—	Callback al cambiar
onComplete	(value: string) => void	—	Callback al completar
pattern	string	—	Regex del patrón permitido
disabled	boolean	false	Deshabilita

---

Accesibilidad

• Auto-focus en el primer slot
• Escribir mueve el foco al siguiente
• Backspace borra y vuelve al anterior
• Pegar un código lo distribuye automáticamente
• Flechas ← → navegan entre slots