# Password Strength

> A CLI-flavored password strength meter styled as a terminal window — a mono prompt-line input, a block-cell strength gauge, an [ok]/[..] criteria checklist, a live entropy readout, and a phosphor dark mode. Fully token-driven and design-system agnostic.

- Category: Password
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Aperture
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: validation, strength-meter, terminal
- Page: https://builder.atheros.ai/components/password-strength
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_password_strength/preview-be8fcc7ce4d2.webp

## 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

## Keyboard shortcuts

- `Enter / Space` — Activate the focused control (show/hide password, submit)

## Common questions

**Which frameworks is Password Strength available in?**

Password Strength ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Password Strength free?**

Password Strength is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Password Strength support dark mode?**

Yes. Password Strength ships light and dark themes, both drawn from the Aperture design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Password Strength live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/password-strength

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt