Password Strength Meter Form Template

Encourage users to create stronger, more secure passwords with a real-time strength meter.

As the user types in the password field, this component provides immediate visual feedback, showing a colored bar and descriptive text to indicate password complexity.

Screenshot of a form with a password field that has a colored strength indicator bar below it.

Get Source Code → Preview →

About this Password Strength Meter

Instead of just listing password requirements, a strength meter actively guides the user. This template provides a complete front-end component for this feature. It consists of a password input field and a strength indicator bar below it.

The JavaScript listens for the input event on the password field, meaning it runs on every keystroke. With each change, it assesses the password based on a set of criteria:

Presence of lowercase letters
Presence of uppercase letters
Presence of numbers
Presence of special characters
Overall length

Based on how many criteria are met, it assigns a score and updates the CSS classes on the indicator bar to change its width and color (e.g., from red for "Weak" to green for "Strong" and "Very Strong"), and also updates a text description.

Features

Real-Time Feedback: The meter updates instantly as the user types.
Visual Indicator: The colored progress bar is an intuitive way to show strength.
Clear Text Descriptions: Explicitly tells the user the current strength level (Weak, Medium, Strong, Very Strong).
Extensible Logic: The JavaScript scoring can be easily adjusted to match your specific password policies.

Dependencies

Uses pure HTML and CSS, with a necessary, self-contained JavaScript block for the logic.

Code

Here's the full code for the form with a password strength meter:

/* -- Strength Meter Styles -- */
.password-strength-meter {
    margin-top: 10px;
}
.strength-bar {
    height: 8px;
    width: 100%;
    background-color: #eee;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.strength-indicator {
    height: 100%;
    width: 0%; /* Starts at 0 */
    background-color: #dc3545; /* Default weak color */
    border-radius: 4px;
    transition: width 0.3s, background-color 0.3s;
}
/* Strength level styles */
.strength-indicator.weak { width: 25%; background-color: #dc3545; }
.strength-indicator.medium { width: 50%; background-color: #ffc107; }
.strength-indicator.strong { width: 75%; background-color: #28a745; }
.strength-indicator.very-strong { width: 100%; background-color: #28a745; }

.strength-text {
    margin-top: 5px;
    font-size: 0.85rem;
    color: #666;
    text-align: right;
    min-height: 1em; /* Prevents layout shift */
}
</style>

<div class="strength-meter-container">
    <form id="strengthForm" action="#" method="post">
        <div class="form-group">
            <label for="password-input">Create a Password</label>
            <input type="password" id="password-input" name="password" required>
            
            <div class="password-strength-meter">
                <div class="strength-bar">
                    <div class="strength-indicator" id="strength-indicator"></div>
                </div>
                <p class="strength-text" id="strength-text"></p>
            </div>
        </div>
        <button type="submit">Submit</button>
    </form>
</div>

if (passwordInput) {
    passwordInput.addEventListener('input', () => {
        const password = passwordInput.value;
        const result = checkPasswordStrength(password);
        
        // Remove all previous strength classes
        strengthIndicator.className = 'strength-indicator';
        
        if (result.strength) {
            strengthIndicator.classList.add(result.strength);
        }
        strengthText.textContent = result.text;
    });
}

function checkPasswordStrength(password) {
    let score = 0;
    const feedback = {
        strength: '',
        text: ''
    };
    
    if (password.length > 0) score++;
    if (password.length >= 8) score++;
    if (password.match(/[a-z]/)) score++;
    if (password.match(/[A-Z]/)) score++;
    if (password.match(/[0-9]/)) score++;
    if (password.match(/[^a-zA-Z0-9]/)) score++; // Special characters

switch(score) {
        case 0:
        case 1:
        case 2:
            feedback.strength = 'weak';
            feedback.text = 'Weak';
            break;
        case 3:
        case 4:
            feedback.strength = 'medium';
            feedback.text = 'Medium';
            break;
        case 5:
            feedback.strength = 'strong';
            feedback.text = 'Strong';
            break;
        case 6:
            feedback.strength = 'very-strong';
            feedback.text = 'Very Strong';
            break;
        default:
             feedback.strength = '';
             feedback.text = '';
    }
    
    return feedback;
}
</script>

View Output