Password Strength Indicator

Password requirements and strength indicator.

Dependencies

• Password Visibility Control
• zxcvbn - Password Strength Estimator ↗️

How to

The Password Strength component allows you to show an indicator of how strong a password is. It comes with the option of adding a list of requirements the password should meet.

Password Strength Level

To evaluate the strength level of the password, we use the zxcvbn libarary by Dropbox. Make sure to include the library before the password-strength.js script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
<script src="../js/password-strength.js"></script>

Password strength level is shown using a meter and a label.

The meter fill is automatically updated based on the password strength level. The fill color is customized using the .password-strength__meter--fill-{n} classes ({n} from 1 to 4, based on password strength).

Four labels are used to show the password strength: Bad, Weak, Good, Strong. You can customize those labels adding a data-strength-labels attribute to the .js-password-strength element (comma separated list):

<div class="password-strength js-password-strength" data-strength-labels="Bad, Weak, Good, Strong">
  <!-- content here -->
</div>

If you don't want to show the password strength level (e.g., you want to include only a list of requirements), add a data-check-strength attribute equal to off to the .js-password-strength element:

<div class="password-strength js-password-strength" data-check-strength="off">
  <!-- content here -->
</div>

In this case, you can remove the .js-password-strength__meter and the .js-password-strength__value elements and you don't need to include the zxcvbn library.

Password Requirements

You can add a list of requirements the password should meet. To each requirement, add a .js-password-strength__req class and a data-password-req equal to the requirement:

<ul>
  <li class="js-password-strength__req" data-password-req="number">At least one number</li>

  <!-- other requirements -->
</ul>

Possible values for data-password-req attribute are:

• number: at least one number;
• letter: at least one letter;
• special: at least one special character;
• uppercase: at least one uppercase character;
• lowercase: at least one lowercase character;
• length:{min}:{max}: length of the password between min and max (max is not required). E.g., if you want your password to be at least six characters, use length:6. If you want it to be max 10 characters, use length:0:10. If you want the password length between 6 and 10, use length:6:10.

In addition to the above, you can add custom requirements as well.

To do that, do not add the .js-password-strength class to the .password-strength element; this way, the component will not be initialized with the default parameters (your custom configuration will be used).

In your JS, initialize it passing your custom requirement functions (you can pass more than one):

new PasswordStrength({
  element: document.getElementById('password'), // your .password-strength element
  customReq: function(value){
    // value is the password value
  }
});

And set the data-password-req equal to the custom function (for the example above, data-password-req="customReq").

For example, if you want to set the password strength level as one of your requirements (at least level Good):

new PasswordStrength({
  element: document.getElementById('password'), // your .password-strength element
  strengthLevel: function(value){
    return zxcvbn(value).score >= 3; // score can be between 0 and 4 (score 3 -> Good) 
  }
});

Categories

• Forms > Form Elements

Bug report & feedback

Component Github page ↗