Password Strength Input: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add password-strength-input.en

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<PasswordStrengthInput/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/password-strength-input.en.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`	`"Password"`	Field label text above the input
`placeholder`	`string`	`"Enter your password"`	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

Password Strength Input