Skip to content



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


Key Description Type Default Required
input Input on which the method will be applied. Best suited for an input of the password type. jQuery true
options Object(#/options) false


Key Description Type Default Required
container Where to append the password strength display (by default, it will be appended after the input). jQuery false
display Can be set to 'icon' in order to display the password strength as a color-changing lock icon (with tooltips) instead of a bar. String('bar' | 'icon') bar false
tooltipPosition When the display is set to 'icon', you can choose the position of the tooltip on the icon. String('top' | 'bottom' | 'right' | 'left') top false


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(template.find(':password'), {
    display: 'icon',
    container: template.find('.your-password-strength-container')