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


  • input (mandatory)

Type: jQuery object

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

  • options (optional)

Type: Object

Allows you to specify the following options: * container: A jQuery object in which to append the password strength display. By default, it will be appended after the input. * display: Set to 'bar' by default, this 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: When the display is set to 'icon', you can choose the position of the tooltip on the icon. Set to 'top' by default, the available positions are 'top', 'right', 'bottom', and 'left'.


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')

Edit this page here