More Forms Snippets
Front-End Coding Playgrounds
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewPassword Strength Meter — Free HTML CSS JS Snippet
Password Strength Meter · Forms · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Password Strength Meter — Regex Score, Coloured Bars & Rules Checklist
A password strength meter gives users real-time feedback as they type a password on a sign-up form or auth login card — showing which rules are met and visually indicating overall strength. Pair it with a show/hide toggle and a password generator. It reduces weak password submissions and improves security without blocking the user flow.
The four-rule scoring
check(v) tests four conditions: v.length >= 8, /[A-Z]/.test(v) (uppercase), /[0-9]/.test(v) (digit), /[^A-Za-z0-9]/.test(v) (symbol). Each boolean is collected into [len, upper, num, sym] and .filter(Boolean).length counts the passing rules — giving a score of 0–4.
The strength bar
Four coloured bars correspond to the score. document.querySelectorAll('.bar') fills bars up to the score index with the appropriate colour from the colors array: empty → red → amber → indigo → green. Bars above the score stay grey.
The rules checklist
Four rule rows show a ✓ or ✗ indicator that updates on every keystroke. Setting row.classList.toggle('ok', condition) applies a green tick CSS state when the condition is true.
Show/hide password toggle
The eye button calls toggleVis() which switches the input type between password and text and updates the icon SVG.
The four regex rules
The strength meter evaluates four independent criteria: (1) length >= 8 characters, (2) at least one uppercase letter (/[A-Z]/), (3) at least one digit (/[0-9]/), (4) at least one special character (/[^A-Za-z0-9]/). Each test returns a boolean. The score is simply the count of passing tests: 0 (empty), 1 (weak), 2 (fair), 3 (good), 4 (strong). This evaluation runs on every input event with no debounce — password fields are short enough that real-time feedback is performant.
Colour and label mapping
Each score maps to a colour and label: 0→grey/empty, 1→red/Weak, 2→orange/Fair, 3→yellow/Good, 4→green/Strong. The bar uses four segment elements that fill progressively. The label updates simultaneously so users understand the colour meaning at a glance without having to interpret the bar alone.
Show/hide password toggle
The eye icon button toggles the input type between "password" and "text". This uses input.type = value directly — the input value is preserved across type changes. The icon switches between an open eye (visible text) and a closed eye (hidden text).
Customising the strength rules
Add more regex rules for stricter requirements: no consecutive characters (/(..)/), minimum unique characters, or no dictionary words. Each additional rule increases the maximum score — update the bar segment count and the score-to-label mapping accordingly. For very strict requirements (passphrase style), adjust the minimum length threshold from 8 to 16 and add a 'Very Strong' fifth tier at the maximum score.
Build with AI
Build, Understand, Optimize, and Extend It With AI
You don't have to trace the regex scoring by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how the four boolean tests (length, uppercase, digit, symbol regex) collapse into a single 0-4 score via filter(Boolean).length, and how that score drives both the colors array and the bar fill in one pass. The same assistant can help optimize it, for instance checking whether running four regex tests on every single keystroke is worth debouncing for very long passwords, or whether the colors and labels arrays could be unified into one lookup table to remove duplication. It's also useful for extending the effect: ask it to add a fifth "Very Strong" tier for 16+ character passwords, block common/breached passwords with an added check, or wire the score into a form's submit handler so weak passwords are rejected before the request is sent. Treat the code less like a finished artifact and more like a starting point for a conversation.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build a live password strength meter in plain HTML, CSS, and vanilla JavaScript using nothing but regex tests run on every input event — no external scoring library.
Requirements:
- A password input with an eye-icon button beside it that toggles the input's type between password and text and swaps the icon's SVG path between an open eye and a crossed-out eye.
- On every input event, evaluate exactly four independent boolean conditions against the current value: length of at least 8 characters, presence of an uppercase letter, presence of a digit, and presence of a special (non-alphanumeric) character.
- Compute a single numeric score as the count of the four conditions that are true, and use that score (0 through 4) to index into a shared colors array and a shared labels array (Weak/Fair/Good/Strong), so the bar color and the text label are always in sync and derived from the same value.
- Render four separate bar segments and fill them progressively up to the score index with the score's color, leaving the remaining segments in a neutral gray, updating with a CSS transition rather than an instant snap.
- Render a small checklist of the same four rules below the bar, each toggling a "pass" class (with a distinct visual indicator, not just color) the instant its condition becomes true, independent of the bar.
- Keep the whole thing framework-free and callable from a single check(value) function so it can be wired to any existing password input's input/change event with one line.Step by step
How to Use
- 1Type a passwordType in the password field to see the strength bars fill and the rules checklist update in real time.
- 2Click the eye iconClick the eye button to toggle between hidden and visible password text.
- 3Add or change rulesIn the JS panel, add new regex checks to the conditions and add matching rule rows to the HTML.
- 4Change the strength coloursUpdate the colors array in the JS panel and matching bar CSS rules.
- 5Block form submission on weak passwordsRead the score variable before form submit: if (score < 3) return prevent the submit.
- 6Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Four boolean conditions are evaluated: length >= 8, /[A-Z]/.test(v), /[0-9]/.test(v), /[^A-Za-z0-9]/.test(v). All four are put in an array and .filter(Boolean).length counts how many are true — giving 0, 1, 2, 3, or 4.
Four .bar elements are queried. Each bar at index i gets the colour from colors[score] if i < score, or an empty/grey state if i >= score. The colors array provides semantic colours per score level.
Add a new regex condition to the conditions array: e.g. const noSpaces = !/\s/.test(v). Add it to the array, increment the checklist rows in the HTML, and handle the new bar state. Update the colors array if you want a 5-level scale.
Read the score variable in the form's onsubmit handler: document.querySelector("form").addEventListener("submit", e => { if (score < 3) { e.preventDefault(); alert("Password too weak"); } });
toggleVis() accesses the password input element and switches input.type between "password" (characters hidden) and "text" (characters visible). The eye icon SVG is also updated to an open or closed eye.
Yes. Click "JSX" for a React component. In React, track the password value in useState. Call the check function in an onChange handler. Store score, rules, and visible as state variables and derive bar colours and rule states from them.