Icon status variant

Password strength meter with status icons

This variant keeps requirement status icons in authored HTML while hidden status text updates for non-visual feedback.

Status icons

Try icon-backed requirement states

Type a sample password and confirm the decorative icons change alongside hidden status text, visible strength text, and progress.

  • Icons are decorative and hidden from assistive technologies.
  • Each requirement keeps text available for state changes.
  • The same local strength logic drives this variant.

Use at least 12 characters with uppercase and lowercase letters, a number, and a symbol.

Password strength: Not rated

  • Needed At least 12 characters
  • Needed Includes an uppercase letter
  • Needed Includes a lowercase letter
  • Needed Includes a number
  • Needed Includes a symbol