Documentation

How to use PasswordChecklist

Install the component, choose the rules your product needs, and give users immediate feedback as they create a password.

Installation

Choose your preferred package manager and import the component into any React application.

💻 bash

pnpm add @asafarim/password-checklist

💻 bash

npm install @asafarim/password-checklist

Quick start

Keep the password controlled by your form, then pass it to the checklist.

⚛️ tsx

12345678910111213141516

"use client";
 
import { useState } from "react";
import { PasswordChecklist } from "@asafarim/password-checklist";
 
export function SignupPassword() {
  const [password, setPassword] = useState("");
 
  return (
    <>
      <input type="password" value={password}
        onChange={(event) => setPassword(event.target.value)} />
      <PasswordChecklist password={password} />
    </>
  );
}

Common use cases

Each example below can be expanded to reveal a copyable implementation.

Basic checklist

Example

Render the ready-made checklist with the default password rules.

Confirm password

Example

Add a match rule for signup and account recovery forms.

Custom rules

Example

Compose the built-in validators with your own synchronous or async checks.

Headless UI

Example

Use the validation hook when you need complete control over the markup.

Explore every rule

Use the demo navigation to see length bounds, special characters, strength scoring, localization, RTL, async rules, and form integration in action.