Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
Basic password strength meter
<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:
- Parses the
data-rulesattribute into a list of validation rules - Creates a
.strength-meterelement with a fill bar after the input - Creates a
.strength-ruleschecklist showing each rule and its status - Listens for
inputevents and evaluates the password against each rule - Calculates a percentage score based on how many rules are met
- Maps the percentage to a strength level: weak, fair, good, or strong
- 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-error) - 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.
Custom rule combinations
<!-- 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.
Strength meter with show/hide toggle
<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>:
Generated DOM structure
<!-- 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.
Reading strength level on input
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.
CSS custom properties and level colors
/* 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-error); 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
<section> <h2>Accessibility</h2> <ul> <li>The meter uses <code>role="meter"</code> with <code>aria-label="Password strength"</code>, <code>aria-valuemin</code>, <code>aria-valuemax</code>, <code>aria-valuenow</code>, and <code>aria-valuetext</code></li> <li><code>aria-valuetext</code> is set to the current level name (weak, fair, good, strong) for screen reader announcements</li> <li>The rules checklist uses <code>aria-label="Password requirements"</code> for context</li> <li>Met rules are indicated with <code>data-met</code> and can be styled with a checkmark icon for visual feedback</li> <li>Must be inside <code><form-field></code> for proper layout and association with the label</li> <li>The password input requires a visible <code><label></code></li> <li>Without JavaScript, the input works as a normal password field — progressive enhancement</li> </ul> </section>