# Password strength

> New-password field with show / hide, a four-step meter and a live rules checklist.

Component · Pro · https://lodeui.com/components/password-strength

## When to use

- Sign-up and change-password forms.

## When not to use

- Sign-in forms: don't hint at rules when people enter an existing password.

## Installation

```bash
npx shadcn@latest add @lode/password-strength
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { PasswordStrength } from "@/components/ui/password-strength";

<PasswordStrength name="password" onValueChange={setPassword} />
```

## API reference

### PasswordStrength

A labelled new-password field with reveal, meter and checklist.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `string` | – | Controlled or uncontrolled. |
| rules | `{ label; test(password) }[]` | `defaultRules` | Your policy; the meter counts passed rules (up to four). |
| label / id / name | `string` | `"Password"` | Field attributes. |

### defaultRules

12+ characters, mixed case, a number, a symbol.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the show / hide button |

## Accessibility

- autocomplete="new-password" so password managers offer to generate one.
- The strength word is announced politely; each rule reads as met or not met.
- Reveal is a toggle button with aria-pressed.

## Motion

- Meter segments fill in sequence; each met rule pops its check.

## Responsive behavior

- Up to 384px wide.

## Performance

- Rules run on each keystroke; keep tests simple.

## Notes for AI

- Enforce the same rules on the server; the meter is guidance only.

## Related

- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Sign in](https://lodeui.com/blocks/sign-in) — Password or magic link, SSO and GitHub, inline validation and a check-your-email state.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.