Password Strength Meter

Authentication UISince 0.3.0

import { PasswordStrengthMeter } from '@absoluteui/components/password-strength-meter';
import '@absoluteui/components/password-strength-meter/style.css';

Using Angular? See Password Strength Meter for Angular.

What it does

Advisory password feedback for sign-up and change-password forms. It provides:

• a password requirements checklist (length, character classes, custom rules) with state in text;
• a strength rating (Weak, Fair, Good, Strong) from a pluggable evaluator, with a four-segment bar;
• debounced, polite announcements of the rating and the number of requirements met;
• attachment to a Password Input (or any <input>), or evaluation of a bound value.

Advisory only, not a security guarantee. The default evaluator counts rules. It does not detect dictionary words, personal data, keyboard patterns, or breached passwords. Your server must enforce the real password policy. AbsoluteUI is not an authentication or security provider.

When to use

• Sign-up and change-password forms, next to a Password Input with autocomplete=new-password.
• Showing a password policy as a live checklist.

When not to use

• Sign-in forms (do not rate existing passwords).
• As the only enforcement of a password policy.

Examples

Meter attached to a new-password field

import { PasswordInput } from '@absoluteui/components/password-input';
import { PasswordStrengthMeter } from '@absoluteui/components/password-strength-meter';

const inputHost = document.querySelector<HTMLElement>('#password');
const meterHost = document.querySelector<HTMLElement>('#meter');
if (inputHost && meterHost) {
  const password = PasswordInput.create(inputHost, { label: 'New password', autocomplete: 'new-password' });
  const meter = PasswordStrengthMeter.create(meterHost, { input: password });
  password.update({ describedBy: [meter.describedById] });
}

Custom rules and evaluator

import { PasswordInput } from '@absoluteui/components/password-input';
import { PasswordStrengthMeter, passwordRequirements, type PasswordStrengthEvaluator } from '@absoluteui/components/password-strength-meter';

const evaluate: PasswordStrengthEvaluator = (value, requirements) => {
  const met = requirements.filter((r) => r.met).length;
  if (value === '') return { score: 0 };
  return { score: met === requirements.length ? (value.length >= 20 ? 4 : 3) : 1 };
};

const inputHost = document.createElement('div');
const meterHost = document.createElement('div');
document.body.append(inputHost, meterHost);
const password = PasswordInput.create(inputHost, { label: 'New password', autocomplete: 'new-password' });
const meter = PasswordStrengthMeter.create(meterHost, {
  input: password,
  requirements: [
    passwordRequirements.minLength(14),
    passwordRequirements.symbol(),
    { id: 'no-company', label: 'Does not contain the company name', test: (v) => !v.toLowerCase().includes('acme') },
  ],
  evaluate,
});
password.update({ describedBy: [meter.describedById] });

Usage

import { PasswordStrengthMeter, passwordRequirements } from '@absoluteui/components/password-strength-meter';
import '@absoluteui/components/password-strength-meter/style.css';

const input = document.querySelector<HTMLInputElement>('#pw');
const host = document.querySelector<HTMLElement>('#pw-meter');
if (input && host) {
  PasswordStrengthMeter.create(host, { input, requirements: [passwordRequirements.minLength(15)] });
}

More usage

import { PasswordInput } from '@absoluteui/components/password-input';
import { PasswordStrengthMeter } from '@absoluteui/components/password-strength-meter';

const inputHost = document.createElement('div');
const meterHost = document.createElement('div');
document.body.append(inputHost, meterHost);
const password = PasswordInput.create(inputHost, { label: 'New password', autocomplete: 'new-password' });
const meter = PasswordStrengthMeter.create(meterHost, { input: password });
password.update({ describedBy: [meter.describedById] });

Anatomy

<div class="aui-password-strength-meter aui-password-strength-meter--score-3">
  <div class="aui-password-strength-meter__body" id="M">          (describedById)
    <div class="aui-password-strength-meter__header">
      <span class="__label">Password strength</span> <span class="__rating">Good</span>
    </div>
    <div class="aui-password-strength-meter__bar" aria-hidden="true">
      <span class="__segment __segment--filled"></span> x4
    </div>
    <ul class="aui-password-strength-meter__requirements" aria-label="Password requirements">
      <li class="__requirement __requirement--met" data-requirement="min-length">
        <svg aria-hidden="true"/><span>At least 12 characters</span><span class="aui-visually-hidden">, met</span>
      </li>
    </ul>
  </div>
</div>

API reference

Factory

PasswordStrengthMeter.create(host: HTMLElement, options?: PasswordStrengthMeterOptions): PasswordStrengthMeter

Global configuration key: passwordStrengthMeter (see Configuration).

Options

Option	Type	Default	Description
label	string		Visible heading. Default: localized “Password strength”.
input	HTMLInputElement | { readonly input: HTMLInputElement }		Input to follow (Password Input, Text Input, or the element).
value	string		Evaluate this value instead of following an input (framework bindings).
requirements	readonly { id: string; label: string | ((locale: string) => string); test: (value: string) => boolean }[]		Checklist rules. Default: defaultPasswordRequirements().
evaluate	(value: string, requirements: readonly PasswordRequirementResult[]) => { score: 0 | 1 | 2 | 3 | 4; label?: string }		Scoring. Default: defaultPasswordEvaluator (advisory).
icons	Partial<{ met: IconRef; unmet: IconRef }>		Icon slot overrides.
showRequirements	boolean	true	Render the requirements checklist. Globally configurable.
announce	boolean	true	Announce the rating and requirement count politely after typing pauses (1 s). Globally configurable.
locale	string	"en-US"	Message and number-formatting locale. Globally configurable. Inherited from common configuration.

Properties

Property	Type	Description
host	HTMLElement	Host element.
describedById	string	Id to add to the input’s aria-describedby (rating and checklist).
result	PasswordStrengthResult	Latest result (score, label, requirements); never the password.
options	Readonly<PasswordStrengthMeterOptions>	Current options.

Methods

Method	Description
evaluate(value: string): PasswordStrengthResult	Evaluate and render (no event, no announcement).
attach(target: HTMLInputElement | { input: HTMLInputElement }): void	Follow an input.
detach(): void	Stop following the input.
update(options: Partial<PasswordStrengthMeterOptions>): void	Merge and apply options.
destroy(): void	Detach, cancel the pending announcement, remove rendering.

Events

Event	Detail	Bubbles	Cancelable	Description
aui-change	{ result: { score: 0 | 1 | 2 | 3 | 4; label: string; requirements: readonly { id: string; label: string; met: boolean }[] } }	Yes	No	The rating or a requirement changed after user input.

CSS classes

All rules live in the aui.components cascade layer, so application styles override them without specificity battles.

Class	Purpose
aui-password-strength-meter	Host.
aui-password-strength-meter--score-0 .. --score-4	Score modifier.
aui-password-strength-meter__body	Describing element (id = describedById).
aui-password-strength-meter__header | __label | __rating	Heading and rating text.
aui-password-strength-meter__bar | __segment	aria-hidden segmented bar (–filled).
aui-password-strength-meter__requirements | __requirement	Checklist (–met; data-requirement holds the id).
aui-password-strength-meter__icon	Met / not met icon.

Icon slots

Slot	Default icon
met	check
unmet	close

Design tokens

Tokens this stylesheet reads (verified in CI). Override them in a theme or with the Theme Designer.

--aui-border-width | --aui-color-border-strong | --aui-color-error-fg | --aui-color-success-fg | --aui-color-surface-sunken | --aui-color-text | --aui-color-text-muted | --aui-color-warning-fg | --aui-duration-fast | --aui-easing-standard | --aui-font-family-sans | --aui-font-size-sm | --aui-font-weight-semibold | --aui-icon-size-sm | --aui-line-height-tight | --aui-progress-height | --aui-radius-pill | --aui-space-1 | --aui-space-2

TypeScript definitions

type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4;
interface PasswordRequirement { readonly id: string; readonly label: string | ((locale: string) => string); readonly test: (value: string) => boolean }
interface PasswordRequirementResult { readonly id: string; readonly label: string; readonly met: boolean }
interface PasswordStrength { readonly score: PasswordStrengthScore; readonly label?: string }
type PasswordStrengthEvaluator = (value: string, requirements: readonly PasswordRequirementResult[]) => PasswordStrength;
interface PasswordStrengthResult { readonly score: PasswordStrengthScore; readonly label: string; readonly requirements: readonly PasswordRequirementResult[] }
type PasswordStrengthTarget = HTMLInputElement | { readonly input: HTMLInputElement };
interface PasswordStrengthMeterConfig { showRequirements: boolean; announce: boolean }
interface PasswordStrengthMeterOptions extends Partial<PasswordStrengthMeterConfig> {
  label?: string; input?: PasswordStrengthTarget; value?: string; requirements?: readonly PasswordRequirement[];
  evaluate?: PasswordStrengthEvaluator; locale?: string; icons?: Partial<PasswordStrengthMeterIcons>;
}
interface PasswordStrengthMeterChangeDetail { result: PasswordStrengthResult }

Accessibility

Pattern: Text rating plus a native list of requirements with state in text; a polite live region for debounced summaries. The segmented bar is aria-hidden (the text carries the meaning).

Keyboard

Key	Context	Action
None	Any	Not focusable; it follows the input the user types in.

Roles

Element	Role
requirements	list (native <ul>, aria-label “Password requirements”)
bar	none (aria-hidden=true)
icons	none (aria-hidden=true)

ARIA attributes

Attribute	Element	Value
aria-label	requirements list	Password requirements
aria-hidden	segmented bar	“true”

Focus

Not focusable. Reference describedById from the input so the rating and checklist are read with the field.

WCAG 2.2 success criteria addressed

Criterion	Level	Note
1.3.1 Info and Relationships	A
1.4.1 Use of Color	A
1.4.3 Contrast (Minimum)	AA
1.4.11 Non-text Contrast	AA
3.3.2 Labels or Instructions	A
4.1.3 Status Messages	AA

Automated test results: Accessibility and compliance.

Notes and known caveats

• Each requirement reads “At least 12 characters, met” / “…, not met” (visually hidden state), never icon or color alone.
• After typing pauses for 1 s, one polite summary is announced when it changed: “Password strength: Good. 4 of 4 requirements met.”
• Manual screen-reader verification (NVDA, JAWS, VoiceOver) is pending.

Behavior

States

Score 0 (empty), 1 Weak, 2 Fair, 3 Good, 4 Strong; each requirement met or not met.

State transitions

From	Trigger	To
any	input event on the attached input	re-evaluated; aui-change when the result changed; summary announced after a 1 s pause when it differs from the last one
any	evaluate(value)	re-evaluated silently
any	empty value	score 0; no announcement

Accessibility notes

• Status is never conveyed by color or icon alone.
• One polite summary per pause (“Password strength: Good. 4 of 4 requirements met.”), not per keystroke.
• Manual screen-reader verification is pending.

Responsive behavior

Full width; the segments share the width; checklist items wrap.

Right-to-left

Segments fill from the inline start; icons precede text in the inline direction.

Theming

Weak = color-error-fg, Fair = color-warning-fg, Good/Strong = color-success-fg fills on color-surface-sunken; met requirements use color-success-fg with a check icon. Forced-colors mode: Highlight fills, CanvasText borders.

Global configuration

configureAbsoluteUI({ components: { passwordStrengthMeter: { showRequirements: true, announce: false } } });

Component configuration

Instance options override global and theme defaults. All options are dynamic.

Icons

icons.met (default check), icons.unmet (default close).

Security

• Advisory only (see Purpose). For stronger feedback, supply an evaluator backed by a vetted strength estimator, and check breached passwords on your server.
• The password is never stored by the meter, logged, emitted, or announced. Requirement tests and evaluators receive it and must not store it either.
• All text is rendered with textContent. CSP-safe.

Data handling

With input, the value is read on each input event and discarded after evaluation. With value, it is held in the options object until updated. No persistence, network access, or telemetry.

Performance

Evaluation runs the requirement tests and the evaluator synchronously; the checklist is re-rendered per evaluation. Budget: evaluate() with the default rules < 1 ms (e2e performance suite).

Supported data scale

Designed for up to about 20 requirements.

Edge cases

Default evaluator (documented, not authoritative):

Condition	Score
Empty	0
A single repeated character (for example aaaaaaaaaaaa)	1 Weak
Fewer than half of the requirements met	1 Weak
Some requirements unmet	2 Fair
All met	3 Good
All met and at least 16 characters	4 Strong

• Lengths count Unicode code points.
• With no requirements, the default evaluator rates any non-empty password Good (3) or Strong (4).
• An evaluator returning a score outside 0-4 is a configuration error.

Errors

Code	Category	Cause
PASSWORD_STRENGTH_METER_OPTIONS	configuration	Invalid label, input, value, evaluator, requirements (duplicate or empty ids, missing label or test), a score outside 0-4, or minLength(n) outside 1-1024.
CFG_INVALID_VALUE / CFG_UNKNOWN_OPTION	configuration	Invalid or unknown configuration.

Known limitations

• Synchronous evaluation only.
• Default rules must be aligned with your server policy through requirements.
• Manual screen-reader verification is pending.

Unsupported scenarios

• Asynchronous evaluators (run breach checks in the application, then call evaluate or pass a custom evaluator result).
• HTML in requirement labels.