Entrada de datos
InputOtp
Un componente de entrada de codigo OTP con casillas individuales, con soporte para estados de exito, error y deshabilitado.
Tests
0%
Block
Uso
El componente SInputOtp renderiza un input numerico de OTP. Coloca hijos SInputOtpItem dentro para definir el numero de digitos.
Seis Digitos
Agrega mas hijos SInputOtpItem para aumentar el numero de digitos.
Exito
Establece success en true para mostrar el input con estilo de exito.
Error
Establece error en true para mostrar el input con estilo de error.
Deshabilitado
Establece disabled en true para evitar la interaccion del usuario.
Block
El componente SInputOtpBlock envuelve a SInputOtp con una etiqueta, texto de ayuda y texto de error. Combina todas las props del componente base con label, helpText y errorText. Cuando se proporciona errorText, el estado de error se aplica automaticamente.
Props
SInputOtp
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
modelValue | string | - | El valor del OTP (v-model) |
disabled | boolean | false | Deshabilita el input |
success | boolean | false | Muestra estilos de exito |
error | boolean | false | Muestra estilos de error |
class | string | - | Clases CSS adicionales |
SInputOtpItem
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
class | string | - | Clases CSS adicionales para la casilla |
Eventos
| Evento | Payload | Descripcion |
|---|---|---|
update:modelValue | string | Se emite cuando el valor del OTP cambia |
Slots
| Nombre | Descripcion |
|---|---|
default | Componentes SInputOtpItem que definen las casillas de digitos |