Password Strength Input

Open in

Enter your password

8+ characters

Number

Lowercase

Uppercase

Special (!@#$)

Installation

Props

Prop	Type	Default	Description
`value`	`string`	`""`	Controlled input value
`onChange`	`(value: string) => void`	-	Callback when value changes
`placeholder`	`string`	`"Password"`	Placeholder text for the input field
`minLength`	`number`	`8`	Minimum required password length
`showStrengthCircle`	`boolean`	`true`	Whether to show the strength indicator circle

Examples

Custom Minimum Length

<PasswordStrengthInput minLength={10} placeholder="Enter a strong password" />

With Change Handler

const handlePasswordChange = (password: string) => {
  console.log("Password strength:", password.length >= 8 ? "Good" : "Weak");
  // Process the password
};
 
<PasswordStrengthInput onChange={handlePasswordChange} />;