PrimitiveDisponible

Password Input

Campo de contraseña oculto con un control independiente para mostrarla u ocultarla. Reutiliza los bordes, foco y validación de Input y los iconos Eye/EyeSlash de Phosphor.

Password

Invalid password

Use at least 10 characters.

Disabled

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/password-input.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import { PasswordInput } from '@/components/ui/password-input';
import { Label } from '@/components/ui/label';

export default function Demo() {
  return (
    <div className="grid w-full max-w-md gap-6">
      <div className="grid gap-2">
        <Label htmlFor="password-demo">Password</Label>
        <PasswordInput id="password-demo" autoComplete="new-password" placeholder="Enter a password" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="password-error">Invalid password</Label>
        <PasswordInput id="password-error" aria-invalid="true" aria-describedby="password-error-message" defaultValue="short" autoComplete="new-password" />
        <p id="password-error-message" className="bl-type-small text-destructive">Use at least 10 characters.</p>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="password-disabled">Disabled</Label>
        <PasswordInput id="password-disabled" disabled defaultValue="not-editable" />
      </div>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Oculto al iniciar. El ojo muestra la contraseña y el ojo tachado la oculta; conserva el texto escrito. Cada campo tiene su propio estado.
El botón ghost cambia la superficie y el borde con hover. Tab muestra el foco; Enter y Espacio cambian la visibilidad sin enviar el formulario.
Error conserva el borde de Input y un mensaje asociado. Disabled deshabilita campo y botón.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
locale	en / es	en	Language of the visibility button label.
showLabel / hideLabel	string	Show password / Hide password	Override accessible names and tooltips; distinguish current and new passwords in the same form.
containerClassName	string	—	Styles the wrapper. className styles the input; reserve room for the trailing button.
Native input props	ComponentProps<'input'> except type	—	Supports ref, id, value, onChange, disabled, required, autoComplete, aria-invalid and aria-describedby. Visibility never changes the value.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Coloca una etiqueta visible antes del componente y relaciónala con htmlFor e id. No envuelvas el campo y el botón en un label.

Tab alcanza el campo y el botón; Enter o Espacio sobre el botón cambia la visibilidad sin enviar el formulario. El nombre accesible y el tooltip anuncian la siguiente acción.

Oculto por defecto y con estado independiente por campo. disabled deshabilita también el botón. Los campos de solo lectura pueden mostrarse.

Indica los errores con aria-invalid y un mensaje asociado. La aplicación consumidora decide cómo validar las contraseñas.