Skip to content
Live demo — this example is server-driven; run the showcase locally for the interactive version.

Password strength

← All patterns

Score + criteria checklist next to a password input. Score in five bands; criteria flip green as the user types.

Examples

Basic

Password field with a meter and a four-rule checklist updating live.

  • 12+ characters
  • Mixed case
  • A digit
  • A symbol

With tooltip

Meter only, with rule details revealed on hover via a popover.

Password rules
  • At least 12 characters
  • Upper- and lower-case letters
  • At least one digit
  • At least one symbol

Usage

Score on submit (server-side) AND while typing (client-side). The client meter is UX; the server is the rule enforcer. Use the same scoring function in both places.

Static snapshot of the quarkus-pha showcase — source & live version