Password strength

Show how strong a new password is while it is typed.

$npx shadcn@latest add @silicon-ui/password-strength

passwordstrength metervalidation

Installation

$npx shadcn@latest add @silicon-ui/password-strength

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/password-strength/password-strength.tsx
- components/silicon-ui/password-strength/password-strength.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { PasswordStrength } from "@/components/silicon-ui/password-strength/password-strength";

Prop	Type	Default
`label*`	`string`	—
`value`	`string`	—
`defaultValue`	`string`	`""`
`onValueChange`	`(value: string, strength: PasswordStrengthResult) => void`	—
`rules` Rules to check. Strength is the share of rules met, spread over four steps.	`PasswordRule[]`	`defaultPasswordRules`
`error` Error copy tied to the field. The field shakes once each time a new error appears.	`string`	—
`revealed`	`boolean`	—
`onRevealedChange`	`(revealed: boolean) => void`	—
`messages` Translated or reworded copy. Every string has an English default; see PasswordStrengthMessages.	`PasswordStrengthMessagesInput`	—
`shortLength` Below this many characters the meter holds at its first step and reads "Too short". Defaults to 8.	`number`	—
`countCharacters` How characters are counted for shortLength. Defaults to code points, so an emoji counts once; pass `password => password.length` to count UTF-16 units like a server might.	`(password: string) => number`	—

Also accepts the props of InputHTMLAttributes<HTMLInputElement>, except type, value, defaultValue, children.