LifeUI
1.53.2OTP Input
Componente de entrada de código de verificación de un solo uso (OTP) que permite a los usuarios ingresar códigos de múltiples dígitos.
_
_
_
_
Controlado
Puedes controlar el valor del input usando las props value y onChange:
_
_
_
_
_
_
Tamaños
El componente soporta tres tamaños diferentes:
_
_
_
_
_
_
_
_
_
_
_
_
Forma Cuadrada
Puedes mostrar los inputs con forma cuadrada usando la prop square:
_
_
_
_
Tipos de Patrón
El componente soporta diferentes patrones de entrada:
_
_
_
_
_
_
_
_
_
_
_
_
Estado de Error
Indica un error en la validación del código con la prop error:
_
_
_
_
Estado Deshabilitado
Puedes deshabilitar el input cuando necesites prevenir la edición:
1
2
3
4
Ejemplos
Formulario de Verificación
Ejemplo completo de un formulario de verificación de código:
Verifica tu código
Ingresa el código de 6 dígitos que enviamos a tu correo electrónico
_
_
_
_
_
_
Props
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
length | number | - | Número de dígitos del código OTP. |
pattern | 'numeric' | 'alphanumeric' | 'chars' | - | Patrón de entrada permitido. |
size | 'small' | 'medium' | 'large' | - | Tamaño del input. |
square | boolean | - | Si los inputs deben tener forma cuadrada. |
error | boolean | - | Si hay un error en la validación. |
disabled | boolean | - | Si el input está deshabilitado. |
value | string | - | Valor controlado del input. |
onChange | (value: string) => void | - | Función que se llama cuando cambia el valor. |
placeholder | string | - | Carácter placeholder para los campos vacíos. |
className | string | - | Clases CSS adicionales para el contenedor. |
slotClassname | string | - | Clases CSS adicionales para cada slot. |