K
KoreUI

Password

Form

Input de contrasena con visibilidad toggleable y medidor de fortaleza.

Uso basico

<x-kore::password label="Contrasena" placeholder="Ingresa tu contrasena" />
<x-kore::password label="Contrasena" placeholder="Ingresa tu contrasena" />

Con icono

Icono Lucide a la izquierda del input.

<x-kore::password label="Contrasena" icon="lock" placeholder="Ingresa tu contrasena" />
<x-kore::password label="Contrasena" icon="lock" placeholder="Ingresa tu contrasena" />

Sin toggle

Oculta el boton de mostrar/ocultar contrasena.

<x-kore::password label="PIN" :toggleable="false" placeholder="Ingresa tu PIN" />
<x-kore::password label="PIN" :toggleable="false" placeholder="Ingresa tu PIN" />

Medidor de fortaleza

Indicador visual de fortaleza con barra de progreso y checklist de reglas. Evalua: longitud minima, mayusculas, minusculas, numeros y caracteres especiales.

<x-kore::password label="Nueva contrasena" :strength="true" placeholder="Crea una contrasena segura" />

{{-- Con icono y fortaleza --}}
<x-kore::password label="Contrasena" icon="lock" :strength="true" placeholder="Minimo 8 caracteres" />

{{-- Longitud minima personalizada --}}
<x-kore::password label="Contrasena de admin" :strength="true" :min-length="12" placeholder="Minimo 12 caracteres" />
<x-kore::password label="Nueva contrasena" :strength="true" placeholder="Crea una contrasena segura" />

{{-- Con icono y fortaleza --}}
<x-kore::password label="Contrasena" icon="lock" :strength="true" placeholder="Minimo 8 caracteres" />

{{-- Longitud minima personalizada --}}
<x-kore::password label="Contrasena de admin" :strength="true" :min-length="12" placeholder="Minimo 12 caracteres" />

Fortaleza sin reglas

Solo muestra la barra de progreso sin el checklist de reglas individuales.

<x-kore::password label="Contrasena" :strength="true" :show-rules="false" placeholder="Ingresa tu contrasena" />
<x-kore::password label="Contrasena" :strength="true" :show-rules="false" placeholder="Ingresa tu contrasena" />

Tamanos

Tres tamanos disponibles.

<x-kore::password label="Small" size="sm" placeholder="sm" />
<x-kore::password label="Medium" size="md" placeholder="md" />
<x-kore::password label="Large" size="lg" placeholder="lg" />
<x-kore::password label="Small" size="sm" placeholder="sm" />
<x-kore::password label="Medium" size="md" placeholder="md" />
<x-kore::password label="Large" size="lg" placeholder="lg" />

Estados

Disabled, readonly, required y error.

<x-kore::password label="Disabled" disabled value="secreto123" />
<x-kore::password label="Readonly" readonly value="readonly123" />
<x-kore::password label="Required" required placeholder="Obligatorio" />
<x-kore::password label="Con error" error="La contrasena es muy corta" />
<x-kore::password label="Disabled" disabled value="secreto123" />
<x-kore::password label="Readonly" readonly value="readonly123" />
<x-kore::password label="Required" required placeholder="Obligatorio" />
<x-kore::password label="Con error" error="La contrasena es muy corta" />

Props

Prop Tipo Default Descripción
label string|null null Texto de la etiqueta
hint string|null null Texto de ayuda debajo del input
name string|null null Nombre del input (tambien para deteccion de errores)
error string|null null Mensaje de error manual
size string md Tamano: sm, md, lg
icon string|null null Icono Lucide izquierdo
toggleable bool true Mostrar boton de mostrar/ocultar (configurable via kore-ui.form.password.toggleable)
strength bool false Habilitar medidor de fortaleza (configurable via kore-ui.form.password.strength)
minLength int 8 Longitud minima de contrasena (configurable via kore-ui.form.password.min_length)
showRules bool true Mostrar checklist de reglas individuales
disabled bool false Estado deshabilitado
readonly bool false Estado de solo lectura
required bool false Campo obligatorio con asterisco
showError bool true Auto-detectar errores del \$errors bag