K
KoreUI

Password

Form

Input de contraseña con visibilidad toggleable y medidor de fortaleza.

Uso basico

<x-kore::password label="Contraseña" placeholder="Ingresa tu contraseña" />
<x-kore::password label="Contraseña" placeholder="Ingresa tu contraseña" />

Con icono

Icono Lucide a la izquierda del input.

<x-kore::password label="Contraseña" icon="lock" placeholder="Ingresa tu contraseña" />
<x-kore::password label="Contraseña" icon="lock" placeholder="Ingresa tu contraseña" />

Sin toggle

Oculta el boton de mostrar/ocultar contraseña.

<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 contraseña" :strength="true" placeholder="Crea una contraseña segura" />

{{-- Con icono y fortaleza --}}
<x-kore::password label="Contraseña" icon="lock" :strength="true" placeholder="Mínimo 8 caracteres" />

{{-- Longitud minima personalizada --}}
<x-kore::password label="Contraseña de admin" :strength="true" :min-length="12" placeholder="Mínimo 12 caracteres" />
<x-kore::password label="Nueva contraseña" :strength="true" placeholder="Crea una contraseña segura" />

{{-- Con icono y fortaleza --}}
<x-kore::password label="Contraseña" icon="lock" :strength="true" placeholder="Mínimo 8 caracteres" />

{{-- Longitud minima personalizada --}}
<x-kore::password label="Contraseña de admin" :strength="true" :min-length="12" placeholder="Mínimo 12 caracteres" />

Fortaleza sin reglas

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

<x-kore::password label="Contraseña" :strength="true" :show-rules="false" placeholder="Ingresa tu contraseña" />
<x-kore::password label="Contraseña" :strength="true" :show-rules="false" placeholder="Ingresa tu contraseña" />

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 contraseña 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 contraseña es muy corta" />

Los textos del medidor se traducen

Los nombres de los cuatro niveles y de las cinco reglas salen de la configuración.

Hasta la 2.2 vivían dentro de resources/js/form/password.js, en inglés: eran los únicos textos de la librería que no se podían cambiar ni publicando las vistas — hacía falta recompilar el bundle.

config/kore-ui.php 
'form' => [
    'translations' => [
        'password_weak'           => 'Weak',
        'password_fair'           => 'Fair',
        'password_good'           => 'Good',
        'password_strong'         => 'Strong',
        'password_rule_length'    => 'At least :min characters',
        'password_rule_uppercase' => 'One uppercase letter',
        // …
    ],
],
'form' => [
    'translations' => [
        'password_weak'           => 'Weak',
        'password_fair'           => 'Fair',
        'password_good'           => 'Good',
        'password_strong'         => 'Strong',
        'password_rule_length'    => 'At least :min characters',
        'password_rule_uppercase' => 'One uppercase letter',
        // …
    ],
],

:min se sustituye por el mínimo que tenga el campo. Y el botón del ojo dice qué hace —«Mostrar la contraseña» / «Ocultar la contraseña», de password_show y password_hide—: se anunciaba «Show password» hasta la 2.2.

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 contraseña (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
Cargando