Password Strength

New

A password field with a four segment meter and a checklist that ticks off each rule as you type.

motionlucide-reactutils@soultel/use-reduced-motion-safe

Password

At least 8 characters, not yet
Upper and lowercase letters, not yet
At least one number, not yet
At least one symbol, not yet

Installation

$ pnpm dlx shadcn@latest add @soultel/password-strength

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/password-strength.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion lucide-react
```
2. Copy the source from the Code tab into components/password-strength.tsx.

Usage

example.tsx12 lines

import { useState } from "react"
import { PasswordStrength } from "@/components/password-strength"

export function SignUp() {
  const [score, setScore] = useState(0)
  return (
    <form>
      <PasswordStrength onScoreChange={setScore} />
      <button disabled={score < 3}>Create account</button>
    </form>
  )
}

Props

Prop	Type	Default	Description
value / defaultValue	string	-	Controlled or initial password.
onValueChange	(value: string) => void	-	Called on every edit.
onScoreChange	(score: number) => void	-	Called with a 0 to 4 score when it changes.
rules	PasswordRule[]	defaultPasswordRules	Each rule has a label and a test function.
label	string	"Password"	Field label.