# Password Strength

Compact password strength meter for sign-up forms. Four bars light up as the password gets stronger, and common passwords are flagged straight away.

> Composed · Free · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add password-strength
```

## Import

```tsx
import { isCommonPassword, derivePasswordScore, PasswordStrength } from "@/components/ui/password-strength/password-strength";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `number` | Controlled score 0–4. Omit for uncontrolled via `defaultValue`, or  pass `password` and the score derives itself. |
| `defaultValue?` | `number` | Uncontrolled initial score. |
| `onValueChange?` | `(score: number) => void` | Fires whenever the effective score changes (derived or set). |
| `password?` | `string` | Live password — derives the score with `derivePasswordScore` and  generates the hint row. Takes precedence over value/defaultValue. |
| `labels?` | `readonly string[]` | Labels for scores 0–4. Default ["Too weak","Weak","Fair","Good","Strong"]. |
| `showLabel?` | `boolean` | Show the score label at the right of the meter row. Default true. |
| `hint?` | `string` | Custom hint under the meter — overrides the derived suggestion.  Pass "" to hide the row entirely. |
| `className?` | `string` | Extra classes on the outer container. |
| `trackClassName?` | `string` | Unlit lamp classes. Default: the accent at low brightness. |

Source: https://lumioui.com/components/password-strength