# PasswordChecklist


`src/lib/components/forms/PasswordChecklist.svelte`

## Purpose

Renders a live, per-rule checklist of password policy requirements. Each rule
shows a check icon (green, strikethrough label) when satisfied and an empty
circle when not. Place it below a password input so users see policy compliance
in real time. The rule set and labels come from `PasswordChecklistRule` and i18n
keys under `validation.password*`.

## Origin

**Custom** — Primebrick-written. Uses Lucide™ `CircleCheckBig` and `Circle`
icons.

## Usage

### Default (all rules)

```svelte
<PasswordChecklist
  password={newPassword}
  rules={[
    PasswordChecklistRule.LENGTH,
    PasswordChecklistRule.LOWERCASE,
    PasswordChecklistRule.UPPERCASE,
    PasswordChecklistRule.NUMBER,
    PasswordChecklistRule.SPECIAL,
  ]}
/>
```

### Subset of rules

Pass only the rules your policy enforces.

```svelte
<PasswordChecklist
  password={value}
  rules={[PasswordChecklistRule.LENGTH, PasswordChecklistRule.NUMBER]}
/>
```

### Custom special-character set

Override the default special-character set (`*-_.#@!|?^:`) used by the
`SPECIAL` rule.

```svelte
<PasswordChecklist
  password={value}
  rules={[PasswordChecklistRule.LENGTH, PasswordChecklistRule.SPECIAL]}
  specialChars="!@#$%^&*"
/>
```

## Props

Full prop table: see [API reference — passwordchecklist](/docs/user-guide/api-reference#passwordchecklist).

Key props: `password: string` (the current password value to validate),
`rules: PasswordChecklistRule[]` (which rules to display), `specialChars?:
string` (default `*-_.#@!|?^:`, character set for the `SPECIAL` rule).

## Next steps

- [Component catalog](/docs/user-guide/components)
- [UI stack](/docs/user-guide/ui-stack)
- [API reference](/docs/user-guide/api-reference#passwordchecklist)