## Password Strength (S—059)

A password field with show/hide, a segmented strength meter and a checklist that ticks as you type.

- URL: https://sundaeui.dev/components/password-strength
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/password-strength.json`
- Tags: form, input, signup, password, validation, strength

The meter fills and changes colour from red to green as rules are met; each rule ticks with a small pop.
Rules are functions you pass in, so it can match your server-side policy exactly.

### Usage

```tsx
import { PasswordStrength } from '@/components/sundae/password-strength'

<PasswordStrength value={pw} onValueChange={setPw} />
```

### Props

- `value / onValueChange` (`string / (v) => void`): Controlled value.
- `rules` (`PasswordRule[]`, default `4 default rules`): Label and test per rule.
- `segments` (`number`, default `4`): Meter segments.
- `variant` (`'bars' | 'line'`, default `'bars'`): Meter style.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Sign-up, reset and change-password forms.

### When not to use

- Login forms: do not grade passwords people already have.

### Accessibility

- A labelled input with autocomplete="new-password", described by the strength word and the rule list.
- The strength word is a polite live region; each rule says "met" or "not met" to screen readers.
- The show/hide toggle is a pressed-state button.

### Keyboard

- Tab: Field → show/hide toggle