OtpInput

Renderiza una fila de cajas de input de un carácter para ingresar un código de verificación de un solo uso. Avanza el foco automáticamente al siguiente campo al ingresar un carácter, retrocede al presionar Retroceso y rellena todos los campos cuando el usuario pega el código completo. Dispara onChange en cada tecla y onComplete cuando todos los campos están llenos.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | onChange | (code: string) => void | Sí | — | Se ejecuta en cada cambio con el valor concatenado actual. | | length | number | No | 4 | Número de cajas de input. | | onComplete | (code: string) => void | No | — | Se ejecuta cuando todas las cajas están completas. | | autoFocus | boolean | No | false | Enfoca el primer input al montar. | | type | 'number' \| 'text' | No | 'number' | Tipo de input. 'number' solo permite dígitos. | | disabled | boolean | No | false | Deshabilita todos los inputs. | | error | boolean | No | false | Resalta todos los inputs con borde rojo. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor. | | inputStyle | React.CSSProperties | No | — | Estilos de cada caja de input. | | containerClassName | string | No | — | Clase CSS del contenedor. | | inputClassName | string | No | — | Clase CSS de cada input. |

Uso

OTP de 6 dígitos

import OtpInput from '@/components/OtpInput';

export default function Example() {
  return (
    <OtpInput
      length={6}
      onChange={(val) => console.log('Actual:', val)}
      onComplete={(code) => console.log('Código completo:', code)}
      autoFocus
    />
  );
}

Con estado de error

import { useState } from 'react';
import OtpInput from '@/components/OtpInput';

export default function Example() {
  const [error, setError] = useState(false);

  return (
    <OtpInput
      length={6}
      onChange={() => setError(false)}
      onComplete={(code) => {
        if (code !== '123456') setError(true);
      }}
      error={error}
    />
  );
}