Skip to content



monster.ui.showPasswordStrength(input[, options]);


input: jQuery object (mandatory)#

Input on which the method will be applied. Best suited for an input of the password type.

options: Object (optional)#

Allows you to specify the following options: * container: jQuery object (mandatory) - where to append the password strength display; By default, it will be appended after the input * display: bar|icon String (optional, default: bar) - can be set to 'icon' in order to display the password strength as a color-changing lock icon (with tooltips) instead of a bar * tooltipPosition: top|bottom|left|right String (optional, default: top) - when the display is set to 'icon', you can choose the position of the tooltip on the icon


This method allows you to add a password strength indicator for a specific input, in the form of either a bar or an icon.


  • Using the default options to show a bar below the input


  • Using custom options to show an icon in a specific container

    monster.ui.showPasswordStrength(yourTemplate.find(':password'), {
        display: 'icon',
        container: yourTemplate.find('.your-password-strength-container')