# Password Checker

> A real-time password strength validator with a live rule checklist, an animated strength meter, and a visibility toggle.

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

## Features

- Native form submission gated by the current checks, with a Labeled `role="progressbar"` and a responsive card that is `26rem` max on desktop and full width on small screens.
- Real-time validation that re-evaluates every rule on each keystroke
- Animated strength meter that scales and shifts color across Weak / Average / Strong tiers
- Rule checklist with animated check icons that fill as each requirement is met
- Password visibility toggle with eye / eye-off Tabler icons and `aria-pressed` state
- Submit button gated until every requirement passes
- Accessible: ARIA live region, focus-visible indicators, reduced-motion support
- Responsive: comfortable layout down to 320px

## Accessibility

- **Strength region** — `aria-live="polite"` announces tier 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

## Common questions

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

Password Checker 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 Checker free?**

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

**Does Password Checker support dark mode?**

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

## Get the code

Preview Password Checker 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-checker

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