Strength
No library Intermediate
A password strength meter: a segmented bar below the input fills and color-shifts from gray to red to amber to green as the user types, driven by character analysis.
A password strength meter: a segmented bar below the input fills and color-shifts from gray to red to amber to green as the user types, driven by character analysis.
Goal: Create a "Strength" password input with animated strength meter.
Visual behavior: A password input field with a 4-segment horizontal bar below it. As the user types, the bar segments fill left-to-right and change color based on password quality: gray (empty) → red (weak, 1 seg) → amber (fair, 2 segs) → green (good, 3 segs) → bright green (strong, 4 segs). A text label (Weak/Fair/Good/Strong) appears below in the matching color. Segments transition smoothly.
Technique:
- Password scoring function checks: length ≥8, length ≥12, has uppercase, has digit, has special char
- Maps score (0-5) to 4 visual levels
- 4 div segments with flex layout, each transitions background-color
- Label span below transitions color
- transition: background 300ms ease
Accessibility: The text label (Weak/Fair/Good/Strong) provides a non-color strength indicator. Segment transitions removed under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.