K
KoreUI

Input OTP

Form

Input de contraseña de un solo uso con avance automático, soporte de pegado, modos numérico/enmascarado y separador visual.

Uso básico

<x-kore::input-otp wire:model="code" label="Código de verificación" :length="6" />
<x-kore::input-otp wire:model="code" label="Código de verificación" :length="6" />

Numérico

Restringe a solo números y muestra el teclado numérico en móvil.

<x-kore::input-otp wire:model="pin" label="PIN" :length="4" numeric />
<x-kore::input-otp wire:model="pin" label="PIN" :length="4" numeric />

Enmascarado

Cada dígito se oculta como contraseña.

<x-kore::input-otp wire:model="pin" label="PIN secreto" :length="4" masked />
<x-kore::input-otp wire:model="pin" label="PIN secreto" :length="4" masked />

Separador

Guión visual entre grupos de dígitos.

– 
<x-kore::input-otp wire:model="code" label="Código" :length="6" :separator-after="3" />
<x-kore::input-otp wire:model="code" label="Código" :length="6" :separator-after="3" />

Tamaños

Tres tamaños disponibles.

<x-kore::input-otp label="Small" :length="4" size="sm" />
<x-kore::input-otp label="Medium" :length="4" size="md" />
<x-kore::input-otp label="Large" :length="4" size="lg" />
<x-kore::input-otp label="Small" :length="4" size="sm" />
<x-kore::input-otp label="Medium" :length="4" size="md" />
<x-kore::input-otp label="Large" :length="4" size="lg" />

Estados

Disabled, required y error.

<x-kore::input-otp label="Disabled" :length="4" disabled />
<x-kore::input-otp label="Required" :length="4" required />
<x-kore::input-otp label="Con error" :length="4" error="Código inválido" />
<x-kore::input-otp label="Disabled" :length="4" disabled />
<x-kore::input-otp label="Required" :length="4" required />
<x-kore::input-otp label="Con error" :length="4" error="Código inválido" />

Props

Prop Tipo Default Descripción
label string|null null Texto de la etiqueta
hint string|null null Texto de ayuda
name string|null null Nombre para detección de errores
error string|null null Mensaje de error manual
length int 6 Número de inputs de dígitos
numeric bool false Restringir a solo números (inputmode=numeric)
masked bool false Ocultar dígitos (type=password)
separatorAfter int|null null Posición para insertar un separador visual
size string md Tamaño: sm, md, lg
disabled bool false Estado deshabilitado
required bool false Campo obligatorio con asterisco
showError bool true Auto-detectar errores del \$errors bag