Password Input

Default

Password

Password must be at least 8 characters.

npx visor add password-input

This copies two files into your project:

This also installs the input component as a dependency.

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

<PasswordInput placeholder="Enter password" />

Prop	Type	Default	Description
`showStrength`	`boolean`	`false`	Show a password strength meter below the input.
`placeholder`	`string`	—	Placeholder text for the password field.
`disabled`	`boolean`	`false`	Disables the password input.
`className`	`string`	—	Additional CSS class names to merge onto the wrapper.
`...props`	`React.InputHTMLAttributes<HTMLInputElement>`	—	All standard HTML input attributes are forwarded.

The component also accepts all standard <input> HTML attributes.

The show/hide toggle button has aria-label="Show password" / "Hide password" that updates as state changes
The toggle button uses aria-pressed to communicate the current visibility state to screen readers
Pair with a <Label> using htmlFor/id for proper labeling
When showStrength is enabled, the strength meter is announced via aria-live="polite" as the user types
The input renders as type="password" by default; toggling to type="text" reveals the value