ReactLoom
Open or close menu
Browse catalog
Back to elements
Element•Premium

Password Strength

A password field with an animated strength meter, live rule checklist, show/hide toggle, Caps Lock warning, and a secure password generator.

Create your account

Pick a password you don’t use anywhere else.

Password strength:
  • At least 8 characters (not met)
  • Upper & lowercase letters (not met)
  • At least one number (not met)
  • At least one symbol (not met)

Customize

Overview

About the Password Strength

A password field with an animated strength meter, live rule checklist, show/hide toggle, Caps Lock warning, and a secure password generator. It is delivered as editable TypeScript for React. Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

  • Sign-up and reset-password forms that should guide users toward a strong password.
  • Account security settings where password rules must be visible.

What’s included

Files in the product ZIP

Password Strength source

components/password-strength.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import
import { PasswordStrength } from "@/components/password-strength";
Minimum example
export default function SignUpPassword() {
  return <PasswordStrength name="password" onStrengthChange={(score) => console.log(score)} />;
}

Props

Component API

PropTypeDefaultDescription
labelstring"Password"Visible field label.
valuestring—Controlled password value.
onChange(value: string) => void—Called with the new password.
onStrengthChange(score: number) => void—Score from 0 (empty) to 4 (strong).
rulesPasswordRule[]defaultPasswordRulesChecklist rules with id, label, and test.
showMeterbooleantrueShow the four-step strength meter.
showRulesbooleantrueShow the rule checklist.
allowGeneratebooleantrueShow the Generate button.
generateLengthnumber16Length of generated passwords.
accentstring"#a78bfa"Focus ring and generate button color.
classNamestring""Additional root class names.

Also accepts native input attributes such as name, required, and autoFocus. The generator uses crypto.getRandomValues.

Compatibility

Verified project setup

  • ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
  • This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
  • Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source.
Images
No image files are included or required by the packaged component.
Fonts
No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Password Strength ZIP, place the source file at src/components/password-strength.tsx, and copy the example into your own page or feature folder.

Target path

src/components/password-strength.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

  • Tailwind CSS is not required by this component.
  • All component styles are embedded in components/password-strength.tsx.