<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>
												divelement 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".data-kt-password-meter-control="visibility".data-kt-password-meter-control="highlight".input groupwith our default form validation and our extended Bootstrap's utility classes for styling.
<!--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-->
												| Name | Type | Description | 
|---|---|---|
| data-kt-password-meter | mandatory | Enables the wrapper element as the Main Wrapper for Password Meter. Accepts trueorfalsevalues.
 | 
| data-kt-password-meter-control | mandatory | Identifies the element as a Visibility Toggle or a Highlight Meter. Accepts either
															 visibilityorhighlightstring values. Bothdata-kt-password-meter-controlHTML 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:
															Here's a sample code structure for the Highlight Meter to display and highlight the password strength based on our Password Meter calculator: 
 | 
| Name | Description | 
|---|---|
| Static Methods | |
| createInstances (DOMString selector) | Initializes Password Meter instances by selector. Default value of selectoris[data-kt-password-meter]. This method can be used to initialize dynamicly populated Password Meter instances(e.g: after Ajax request).
 | 
| getInstance (DOMElement element) | Get the Password Meter instance created 
 | 
| Public Methods | |
| Constructor | Constructs a new instance of KTPasswordMeterclass and initializes a Password Meter control:
Remove
																 data-kt-password-meter="true"attribute to avoid lazy initializes. | 
| check | Triggers the Password Meter to check the input string password strength. 
 | 
| 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,numbersand special characters like@ $ % !. The password strength score starts from0and ends at100.
 | 
| reset | Resets the password meter's strength calculation. 
 |