PasswordInput
Contraseña con botón de mostrar y, si hace falta, el medidor de fuerza.
Usar
import {
PasswordInput,
PasswordStrengthMeter,
} from "@unozero-ai/ui/react";
<PasswordInput></PasswordInput>Configurador
Cambia las propiedades y mira el campo y su código al mismo tiempo.
<PasswordInput value="Mar-Caribe-2026" label="Contraseña" />Inicio de sesión
Es un Input con el botón del ojo: acepta las mismas propiedades salvo type, y el ojo ocupa el sitio del slot end. El botón está en el orden de Tab y cambia de nombre al pulsarlo. Pon autocomplete="current-password" y, en el campo del correo, autocomplete="username" (en minúscula, como en HTML), para que el gestor de contraseñas rellene los dos. Valida required, minlength y pattern como un <input>.
Textos del botón
Los nombres del botón («Mostrar contraseña», «Ocultar contraseña») salen de setLabels, que sustituye al UIProvider del kit de React. toggleLabel los cambia solo en este campo. Úsalo cuando el campo no guarda una contraseña, como la clave del Wi-Fi.
Con medidor de fuerza
PasswordStrengthMeter (uz-password-strength-meter) solo pinta: la barra, la palabra (Débil, Regular, Buena, Fuerte) y la lista de lo que falta. Qué cuenta como fuerte lo decide el producto, así que calcula strength, score y feedback tú mismo, con los textos ya traducidos; max es 7 por defecto. Ahora va dentro del campo, como hijo: se pinta debajo y queda enlazado como su descripción, así que el lector lo lee al enfocar. El nivel no va solo en el color de la barra: la palabra y la lista lo dicen (la Regla del Tenant). Úsalo al crear o cambiar una contraseña, nunca al iniciar sesión.
En React, onInput en el envoltorio todavía no funciona (choca con un método interno del kit): escucha onInput en el <form>, que recibe el evento de los dos campos, y distínguelos por name.
Error y deshabilitado
El error dice qué pasó y qué viene después, no solo «contraseña incorrecta». Deshabilitado sirve para una credencial que se ve pero gestiona otra persona; también apaga el botón del ojo.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).