Advanced forms

Strong Password

The Strong Password Component uses a progress bar to display password strength, encouraging users to create stronger passwords during registration or updates.

Basic example

Default

Basic example demonstrating password input with strength meter.

Label

Password input with label.

Enter password

Types

Floating

Strong password example with input type.

Enter password

Illustrations

Indicator and Hints

Indicators and hints help enhance the user experience.

Level:

Your password must contain:

Minimum number of characters is 6.
Should contain lowercase.
Should contain uppercase.
Should contain numbers.
Should contain special characters.

Minimum length

In this example, the `minLength` property is used to specify the minimum number of characters, which is set to 7.

API

Use the `specialCharactersSet` property to specify a custom set of special characters. In below example, only `&`, `!`, and `@` will satisfy the special character condition.

Popover example

Indicator and hints inside a popover.

Destroy/Reinitialize

The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a strong password.

Level:

Your password must contain:

Minimum number of characters is 6.
Should contain lowercase.
Should contain uppercase.
Should contain numbers.
Should contain special characters.

JavaScript behavior

Events — Event usage

METHOD| DESCRIPTION | RETURNING VALUE `on:change`| Called when target element was changed. | <ul class="m-0"><li><code>strength</code> number. Current level of strength (0 - 4). Default - 0</li><li><code>rules</code> array. Current set of passed checks ("lowercase", "uppercase", "numbers", "special-characters")</li></ul>

JavaScript

const {element } =  HSStrongPassword.getInstance('#strong-password', true);
element.on('change', ({strength, rules}) => {
  console.log('strength:', strength)
  console.log('rules:', rules)
});

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`input`	component	Basic input field.
`strong-password:{tw-utility-class}`	variant	The modifier allows setting Tailwind classes for the passed stripes.
`strong-password-accepted:{tw-utility-class}`	variant	The modifier allows setting Tailwind classes when password strength is accepted.
`strong-password-active:{tw-utility-class}`	variant	The modifier allows setting Tailwind classes when a password strength rule is active.