# Documentation v8.0.38

Preview Downloads Purchase

# Overview

Password Meter is an exclusive component of Metronic that provides a simple and powerful build-in Javascript solution to calculate the password strength when a user enters a password string within an input field.

# Usage

Password Meter's CSS and Javascript bundles are globally included in all pages.

    <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
    <script src="assets/js/scripts.bundle.js"></script>

# Initialization

- Password Meter structure comes in a few layers.
  - Main Wrapper
  - Visibility Toggle
  - Highlight Meter
- The Main Wrapper should be a simple `div`element that will contain all the necessary components, such as: input field, input label and/or any additional spacing or note elements required. The Main Wrapper can be identified by adding `data-kt-password-meter="true"`.
- The Visibility Toggle is an icon button positioned within the input field to toggle password state from hidden to visible and vice versa. The Visibility Toggle can be identified by adding `data-kt-password-meter-control="visibility"`.
- The Highlight Meter is a group of elements that is structured in a way to display and highlight the password strength based on our Password Meter calculator. The Highlight Meter can be identified by adding `data-kt-password-meter-control="highlight"`.
- Password Meter is usually added as an `input group`with our default form validation and our extended Bootstrap's utility classes for styling.
- Password Meter instances can also be controlled programmatically. See below for more info.

# Basic

Here's a basic example of our Password Meter.
New Password
Use 8 or more characters with a mix of letters, numbers & symbols.

    <!--begin::Main wrapper-->
    <div class="fv-row" data-kt-password-meter="true">
        <!--begin::Wrapper-->
        <div class="mb-1">
            <!--begin::Label-->
            <label class="form-label fw-bold fs-6 mb-2">
                New Password
            </label>
            <!--end::Label-->

            <!--begin::Input wrapper-->
            <div class="position-relative mb-3">
                <input class="form-control form-control-lg form-control-solid"
                    type="password" placeholder="" name="new_password" autocomplete="off" />

                <!--begin::Visibility toggle-->
                <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2"
                    data-kt-password-meter-control="visibility">
                    <i class="bi bi-eye-slash fs-2"></i>

                    <i class="bi bi-eye fs-2 d-none"></i>
                </span>
                <!--end::Visibility toggle-->
            </div>
            <!--end::Input wrapper-->

            <!--begin::Highlight meter-->
            <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
            </div>
            <!--end::Highlight meter-->
        </div>
        <!--end::Wrapper-->

        <!--begin::Hint-->
        <div class="text-muted">
            Use 8 or more characters with a mix of letters, numbers & symbols.
        </div>
        <!--end::Hint-->
    </div>
    <!--end::Main wrapper-->

# Markup Reference

Password Meter uses HTML attributes to identify the Main Wrapper, Visibility Toggle and Highlight Meter. Here are the references for each below
HTML Attribute references

Name | Type | Description
--- | --- | ---
`data-kt-password-meter` | `mandatory` | Enables the wrapper element as the Main Wrapper for Password Meter. Accepts `true`or `false`values.
    <div data-kt-password-meter="true">
        ...
    </div>
`data-kt-password-meter-control` | `mandatory` | Identifies the element as a Visibility Toggle or a Highlight Meter. Accepts either `visibility`or `highlight`string values. Both `data-kt-password-meter-control`HTML attributes are mandatory and are required to be placed within the Main Wrapper. Here's a sample input field group with the Visibility Toggle aligned to the right of it to toggle password state from hidden to visible and vice versa:
    <div class="position-relative mb-3">
        <!--begin::Input-->
        <input class="form-control form-control-lg form-control-solid"
            type="password"
            placeholder=""
            name="new_password"
            autocomplete="off" />
        <!--end::Input-->

        <!--begin::Visibility toggle-->
        <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2"
            data-kt-password-meter-control="visibility">
            <i class="bi bi-eye-slash fs-2"></i>

            <i class="bi bi-eye fs-2 d-none"></i>
        </span>
        <!--end::Visibility toggle-->
    </div>
Here's a sample code structure for the Highlight Meter to display and highlight the password strength based on our Password Meter calculator:
    <!--begin::Highlight meter-->
    <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
        <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
        <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
        <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
        <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
    </div>
    <!--end::Highlight meter-->

All Bootstrap styling classes can be modified to suit your project needs. However, the structure and position of the HTML elements should remain the same.

# Methods

All Password Meter components are initialized automatically, however the following are Password Meter's functionality methods for more control.

Name | Description
--- | ---
Static Methods
`createInstances (DOMString selector)` | Initializes Password Meter instances by selector. Default value of `selector`is `[data-kt-password-meter]`. This method can be used to initialize dynamicly populated Password Meter instances(e.g: after Ajax request).
    KTPasswordMeter.createInstances();
`getInstance (DOMElement element)` | Get the Password Meter instance created
    var passwordMeterElement = document.querySelector("#kt_password_meter_control");
    var passwordMeter = KTPasswordMeter.getInstance(passwordMeterElement);
Public Methods
`Constructor` | Constructs a new instance of `KTPasswordMeter`class and initializes a Password Meter control:
    var passwordMeterElement = document.querySelector("#kt_password_meter_control");
    var passwordMeter = new KTPasswordMeter(passwordMeterElement);
Remove `data-kt-password-meter="true"`attribute to avoid lazy initializes.
`check` | Triggers the Password Meter to check the input string password strength.
    passwordMeter.check();
`getScore` | Returns the password strength score based on the input string. The score is calculated based on the characters used within the input string. Each character is split into 4 types to generate the password strength: `lowercase letters`, `uppercase letters`, `numbers`and special characters like `@ $ % !`. The password strength score starts from `0`and ends at `100`.
    passwordMeter.getScore();
`reset` | Resets the password meter's strength calculation.
    passwordMeter.reset();

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now