Password Strength Input

A password input with a live strength meter, a rule checklist, and a reveal toggle.

It computes the password strength as you type (length, upper/lower case, digits, symbols), lighting up a 4-segment colour bar one segment at a time as the level rises, ticking off the rule checklist item by item with an animation, and adding an eye button to toggle plaintext display — good for sign-up and change-password forms.

Loading preview…

npx shadcn@latest add https://webberui.com/r/password-strength-input.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Field labellabel

Placeholder textplaceholder

Show the rule checklistshowRules

Disable inputdisabled

<PasswordStrengthInput />

Installation

npx shadcn@latest add https://webberui.com/r/password-strength-input.json

Or, once registries are configured in components.json, install it as @webberui/password-strength-input.

Usage

import { PasswordStrengthInput } from "@/components/ui/password-strength-input";

<PasswordStrengthInput
  label="Set a password"
  placeholder="Enter at least 8 characters"
  onValueChange={(value, passedCount) => console.log(value, passedCount)}
/>

Custom rules:

<PasswordStrengthInput
  rules={[
    { id: "length", label: "At least 12 characters", test: (v) => v.length >= 12 },
    { id: "number", label: "Contains a digit", test: (v) => /\d/.test(v) },
  ]}
/>

Props

Prop	Type	Default	Description
`value`	`string`	—	Current value in controlled mode; when provided, the input content is managed externally
`defaultValue`	`string`	`""`	Initial value in uncontrolled mode
`onValueChange`	`(value: string, passedCount: number) => void`	—	Callback for value changes; the second argument is the number of rules passed
`rules`	`PasswordRule[]`	length / case / digit / symbol, four items	Custom validation rule list (`id`, `label`, `test`)
`label`	`string`	`"密碼"`	Field label text above the input
`placeholder`	`string`	`"輸入您的密碼"`	Placeholder hint text of the input
`showRules`	`boolean`	`true`	Whether to show the rule checklist
`disabled`	`boolean`	`false`	Whether input is disabled
`className`	`string`	—	Forwarded to the outermost container

Accessibility

Strength changes are announced live through a hidden aria-live="polite" region (for example "password strength: strong")
The reveal toggle button has an aria-label (show password / hide password) and an aria-pressed state
The field label is correctly associated with the input through htmlFor, and autoComplete="new-password" is used
Each rule is marked "met / not met" with an aria-label, and the decorative colour bar and icons are hidden from assistive technology
When the user has "reduce motion" enabled at the system level, the colour bar and checkmark animations become instant state changes with no spring animation