Password Input

FreeNew

A password field with a visibility toggle and a four-step strength guide that explains how to improve the entry.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

value

defaultValue

showStrength

label


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/password-input.json

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

<PasswordInput label="New password" name="password" />

<PasswordInput
  value={password}
  onValueChange={setPassword}
  showStrength={false}
/>

Prop	Type	Default	Description
`value`	`string`	-	Controlled password value.
`defaultValue`	`string`	`""`	Initial password when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Called with the new password.
`showStrength`	`boolean`	`true`	Shows the four-step strength guide while typing.
`label`	`string`	`"Password"`	Accessible name of the field.
`className`	`string`	-	Class names for the wrapper.

Other <input> props (except type, value, defaultValue and onChange) go to the input.

The score counts length of 8 or more, mixed case, a digit and a symbol. It is a guide, not a security check.
The strength line is announced politely to screen readers as it changes.

Guide and examples


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/password-input.json

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

<PasswordInput label="New password" name="password" />

<PasswordInput
  value={password}
  onValueChange={setPassword}
  showStrength={false}
/>

Prop	Type	Default	Description
`value`	`string`	-	Controlled password value.
`defaultValue`	`string`	`""`	Initial password when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Called with the new password.
`showStrength`	`boolean`	`true`	Shows the four-step strength guide while typing.
`label`	`string`	`"Password"`	Accessible name of the field.
`className`	`string`	-	Class names for the wrapper.

Other <input> props (except type, value, defaultValue and onChange) go to the input.

The score counts length of 8 or more, mixed case, a digit and a symbol. It is a guide, not a security check.
The strength line is announced politely to screen readers as it changes.