data-strength

Real-time password strength meter with configurable rules checklist. Shows weak/fair/good/strong levels as the user types.

Overview

The data-strength attribute adds a real-time password strength meter to any password input. A visual meter bar and rules checklist update as the user types, giving instant feedback on password quality.

<form-field> <label for="password">Password</label> <input type="password" id="password" data-strength data-rules="length:8,uppercase,lowercase,number,special" required> </form-field>

How It Works

Add data-strength to a password input inside a <form-field>. The init script:

  1. Parses the data-rules attribute into a list of validation rules
  2. Creates a .strength-meter element with a fill bar after the input
  3. Creates a .strength-rules checklist showing each rule and its status
  4. Listens for input events and evaluates the password against each rule
  5. Calculates a percentage score based on how many rules are met
  6. Maps the percentage to a strength level: weak, fair, good, or strong
  7. Updates the meter fill width, color, and ARIA attributes in real time

The input must be inside a <form-field> so the meter and checklist render in the correct position within the field layout.

Attributes

Attribute Type Description
data-strength boolean Enables the password strength meter on the input.
data-rules string Comma-separated list of rules. Available rules: length:N, uppercase, lowercase, number, special.
data-strength-init boolean Set automatically to prevent double-binding. Do not set manually.

Rules

The data-rules attribute accepts a comma-separated list of validation rules. Each rule is evaluated independently and contributes equally to the overall score.

Rule Syntax Description
Minimum length length:N Password must be at least N characters. Checklist shows "At least N characters".
Uppercase uppercase Must contain at least one uppercase letter (A–Z).
Lowercase lowercase Must contain at least one lowercase letter (a–z).
Number number Must contain at least one digit (0–9).
Special character special Must contain at least one special character (!@#$%^&* etc.).

Strength Levels

The percentage of rules met determines the strength level:

  • Weak — less than 40% of rules met (--color-danger)
  • Fair — 40% to 74% of rules met (--color-warning)
  • Good — 75% to 99% of rules met (--color-info)
  • Strong — 100% of rules met (--color-success)

The meter fill bar changes color and width to reflect the current level.

Custom Rule Combinations

Mix and match rules to set the appropriate strength requirements for your use case. Fewer rules make it easier to reach "strong"; more rules require a more complex password.

<!-- Strong password: 12+ chars, mixed case, numbers, specials --> <form-field> <label for="secure-pw">Password</label> <input type="password" id="secure-pw" data-strength data-rules="length:12,uppercase,lowercase,number,special" required> </form-field> <!-- Moderate: 6+ chars with numbers --> <form-field> <label for="moderate-pw">Password</label> <input type="password" id="moderate-pw" data-strength data-rules="length:6,uppercase,number" required> </form-field>

With Password Toggle

The strength meter works alongside the data-show-password toggle. Both enhancements coexist without conflict — the show/hide button and strength meter each enhance the same input independently.

<form-field> <label for="pw-toggle">Password</label> <input type="password" id="pw-toggle" data-strength data-rules="length:8,uppercase,lowercase,number,special" data-show-password required> </form-field>

DOM Structure

After initialization, the following elements are inserted after the password input within the <form-field>:

<!-- After init, the following structure is generated after the input --> <div class="strength-meter" role="meter" aria-label="Password strength" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="weak"> <div class="strength-fill" data-level="weak"></div> </div> <ul class="strength-rules" aria-label="Password requirements"> <li data-rule="length">At least 8 characters</li> <li data-rule="uppercase">One uppercase letter</li> <li data-rule="lowercase">One lowercase letter</li> <li data-rule="number">One number</li> <li data-rule="special">One special character</li> </ul>

The .strength-meter uses role="meter" with ARIA attributes for the current score. The .strength-rules checklist marks met rules with data-met.

Events

The strength meter updates on native input events. You can read the current level and score from the generated DOM.

const input = document.querySelector('[data-strength]'); input.addEventListener('input', () => { const meter = input.parentElement.querySelector('.strength-meter'); const level = meter.querySelector('.strength-fill').dataset.level; const score = meter.getAttribute('aria-valuenow'); console.log('Level:', level, 'Score:', score + '%'); });

Styling

The meter, fill bar, and rules checklist are fully customizable via CSS. Styles are scoped to the generated class names and the data-level attribute on the fill bar.

/* Meter track */ [data-strength][data-strength-init] ~ .strength-meter { --strength-track-height: 0.375rem; --strength-track-bg: var(--color-border); --strength-track-radius: var(--radius-pill); } /* Meter fill — color changes per level */ .strength-fill[data-level="weak"] { background: var(--color-danger); width: 25%; } .strength-fill[data-level="fair"] { background: var(--color-warning); width: 50%; } .strength-fill[data-level="good"] { background: var(--color-info); width: 75%; } .strength-fill[data-level="strong"] { background: var(--color-success); width: 100%; } /* Rules checklist */ .strength-rules { list-style: none; padding: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); } .strength-rules li[data-met] { color: var(--color-success); }

Dynamic Elements

Strength-enhanced inputs added to the DOM after page load are automatically enhanced via a MutationObserver. No manual initialization is needed.

// Dynamically added strength inputs are auto-enhanced via MutationObserver const input = document.createElement('input'); input.type = 'password'; input.dataset.strength = ''; input.dataset.rules = 'length:8,uppercase,number'; document.body.appendChild(input); // input is ready to use — no manual init needed

Accessibility

  • The meter uses role="meter" with aria-label="Password strength", aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext
  • aria-valuetext is set to the current level name (weak, fair, good, strong) for screen reader announcements
  • The rules checklist uses aria-label="Password requirements" for context
  • Met rules are indicated with data-met and can be styled with a checkmark icon for visual feedback
  • Must be inside <form-field> for proper layout and association with the label
  • The password input requires a visible <label>
  • Without JavaScript, the input works as a normal password field — progressive enhancement