Copy page

Components

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)

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

Subset of rules

Pass only the rules your policy enforces.

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

Custom special-character set

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

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

Props

Full prop table: see 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
• UI stack
• API reference