Password Checklist

Demo playground

Async rule

Async validators show a pending state while resolving. Useful for server-side checks like breach detection.

  • Not found in breached password database — checking

Snippet

Copy the example to your clipboard.

const asyncRule: CustomRule = {
  id: "not-breached",
  label: "Not found in breached password database",
  validate: async (password) => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000));
    return !breachedPasswords.includes(password.toLowerCase());
  },
};

<PasswordChecklist
  value={password}
  customRules={[asyncRule]}
/>