webdevpuneet.com

Related Snippets

221 in Forms category
1–6 of 60

Quill Rich Text Editor with Custom Toolbar and Character Limit

CodeMirror JSON Editor with Validation Gutter

CodeMirror Code Editor with Line Numbers, Folding and Themes

Marked + DOMPurify Live Markdown Preview

FilePond Image Upload with Preview and Reorder

Cropper.js Aspect-Ratio Presets for Social Posts

Password Strength Meter — Free HTML CSS JS Snippet

Password Strength Meter · Forms · Plain HTML, CSS & JS · Live preview

CategoryForms
TagsSVGData VisualizationAuthenticationForms & Validation

Copy & paste

Source Code

<div class="demo">
  <h3>Create password</h3>
  <div class="field">
    <div class="input-wrap">
      <input type="password" id="pwd" placeholder="Enter a password…" oninput="check(this.value)" autocomplete="new-password" />
      <button class="eye" onclick="toggleEye(this)" type="button">
        <svg id="eye-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
      </button>
    </div>
    <div class="bars">
      <div class="bar" id="b1"></div>
      <div class="bar" id="b2"></div>
      <div class="bar" id="b3"></div>
      <div class="bar" id="b4"></div>
    </div>
    <div class="strength-label" id="label">Enter a password</div>
  </div>
  <ul class="rules" id="rules">
    <li id="r-len">At least 8 characters</li>
    <li id="r-upper">Uppercase letter (A–Z)</li>
    <li id="r-num">Number (0–9)</li>
    <li id="r-sym">Special character (!@#$…)</li>
  </ul>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Four regex checks: length >=8, uppercase, digit, symbol via test()
score = [conditions].filter(Boolean).length — 0 to 4
Four strength bars fill to score index with semantic colours
colors array: empty/red/amber/indigo/green per score level
Rules checklist: classList.toggle("ok", condition) per rule row
Show/hide password toggle switches input type between password and text
Strength label: Weak/Fair/Good/Strong updates with score
Export as HTML file, React JSX, or React + Tailwind CSS
Mobile (375px), Tablet (768px), Desktop device preview buttons
Live split-pane editor — preview updates as you type

About this UI Snippet

Password Strength Meter — Regex Score, Coloured Bars & Rules Checklist

Screenshot of the Password Strength Meter snippet rendered live

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.

Step by step

How to Use

  1. 1
    Type a passwordType in the password field to see the strength bars fill and the rules checklist update in real time.
  2. 2
    Click the eye iconClick the eye button to toggle between hidden and visible password text.
  3. 3
    Add or change rulesIn the JS panel, add new regex checks to the conditions and add matching rule rows to the HTML.
  4. 4
    Change the strength coloursUpdate the colors array in the JS panel and matching bar CSS rules.
  5. 5
    Block form submission on weak passwordsRead the score variable before form submit: if (score < 3) return prevent the submit.
  6. 6
    Export 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

Sign-up and account creation forms
Embed the strength meter below the password field on any registration form. Real-time feedback reduces weak password submissions.
Password change and reset flows
Use on the new password field in account settings or password reset pages to guide users toward strong passwords.
Learn regex pattern testing
The strength check uses /[A-Z]/, /[0-9]/, and /[^A-Za-z0-9]/ regex. Edit the patterns in the JS panel to understand how each test matches different character types.
Password policy enforcement UI
Show company password policy requirements as the rules checklist. Update the regex conditions to match your policy (e.g. minimum 12 characters, no repeated characters).
API key and token generators
Use the strength UI to validate generated API keys or secrets meet complexity requirements before displaying them to the user.
Add to any existing password input
Wire check() to any password input's oninput event. The bars and checklist update independently of the surrounding form.
Related: Variant Swatch Picker
See the Variant Swatch Picker for a related forms pattern worth pairing with this one.

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.