Password Strength

Features

• Every compact action retains a 44px minimum target.
• Real-time validation that re-evaluates every rule on each keystroke
• Block-cell strength gauge whose cells light up per criteria met and recolor across weak / medium / strong tiers via cell state classes (no width transitions)
• [ok] / [..] criteria checklist that flips as each requirement is satisfied
• Live entropy readout (~NN bits) estimated from the character-pool size and length
• Password visibility toggle with eye / eye-off Tabler icons and aria-pressed state
• Submit button gated until every requirement passes
• Cool ice daylight terminal and a classic amber-phosphor dark terminal, driven by a dark class on body
• Accessible: ARIA live region, focus-visible indicators, reduced-motion support
• Responsive: comfortable layout down to 320px

Accessibility

Strength region

aria-live="polite" announces tier and criteria changes

Visibility toggle

<button> with aria-label and aria-pressed

Input label

<label for> association plus aria-describedby

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Password Strength in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the password is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.