• advanced forms
  • Strong Password

advanced forms

Tailwind CSS Strong Password

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

Require FlyonUI JS
Class Name
Type
Description
inputComponentBasic input field.
strong-password:{tw-utility-class}VariantThe modifier allows setting Tailwind classes for the passed stripes.
strong-password-accepted:{tw-utility-class}VariantThe modifier allows setting Tailwind classes when password strength is accepted.
strong-password-active:{tw-utility-class}VariantThe modifier allows setting Tailwind classes when a password strength rule is active.

Basic example

Default

Basic example demonstrating password input with strength meter.

Label

Password input with label.

Types

Floating

Strong password example with input type.

Illustrations

Indicator and Hints

Indicators and hints help enhance the user experience.

Minimum length

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

To test this, we’ve disabled the inclusion of lowercase, uppercase, numbers, and special characters using the :checksExclude property. Now, only the min-length requirement is active.

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 method is provided to facilitate the destruction of a strong password.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-strong-passwordEnable strong password requirements for a specific element. The password must include at least one lowercase letter, one uppercase letter, one number, one special character (!%&@#$^*?_~), and be a minimum of 6 characters long.--
:target (required)This function accepts the ID of the content element that should be observed, typically the ID of an input element.string-
:stripClassesDefines CSS classes for each strip.--
:minLengthSpecifies the minimum length required for a password.number6
:modeSpecifies the mode to be used. If “popover” is selected, the hints will be displayed as a popover.default or popoverdefault
:popoverSpaceThis option is available when the mode is set to “popover”. It specifies the space between the popover and the target element.number10
:checksExcludeSpecifies which checks should be excluded. It accepts an array of strings, such as [“min-length”, “lowercase”, “uppercase”, “numbers”, “special-characters”].array[]
:specialCharactersSetSpecifies which special characters should be used for checking. It accepts a string containing the available characters, for example, “!%&”.string!"#$%&'()*+,-./:;<=>?@[\\\]^_`{}~
:hintsSpecifies the element to be observed as the hints container. This must be a valid selector. Some selectors available for use inside the hints include:
  • [data-pw-strength-hint] Specifies the element to be observed as the weakness text container. It should contain an array of strings, such as [“Empty”, “Weak”, “Medium”, “Strong”, “Very Strong”, “Super Strong”]. Each text corresponds to a specific strength value. For example, “Medium” has an index of 2 and will be displayed when the strength is also 2. “Empty” has an index of 0 and will be shown when the field is empty and has no strength.
  • [data-pw-strength-rule] Specifies the element to be observed as the rule text container. It can have one of the following values: “min-length”, “lowercase”, “uppercase”, “numbers”, or “special-characters”.
  • [data-check]Specifies the element to be observed inside the [data-pw-strength-rule] attribute as the rule check icon container.
  • [data-uncheck]Specifies the element to be observed inside the [data-pw-strength-rule] attribute as the rule uncheck icon container.
string-

Methods

The HSStrongPassword object is contained within the global window object.

METHOD
DESCRIPTION
PUBLIC METHODS
recalculateDirection()Force recalculation for dropdown hint.
destroy()Destroys the instance, removes generated markup (if any), removes added classes and attributes.
STATIC METHODS
HSStrongPassword.getInstance(target)
Returns the element linked to the target.
  • target should be a Node or string (valid selector).

Force dropdown hint position to be recalculated when scrolling (public method).

const strongPassword = new HSStrongPassword(document.querySelector('#strong-password'));

document.addEventListener('scroll', () => {
  if (strongPassword) strongPassword.recalculateDirection();
});

Force dropdown hint position to be recalculated when scrolling (mixed).

const strongPassword = HSStrongPassword.getInstance('#strong-password');

document.addEventListener('scroll', () => {
  if (strongPassword) strongPassword.recalculateDirection();
});

Destroy instance.

const { element } = HSStrongPassword.getInstance('#strong-password-destroy', true);
const destroyBtn = document.querySelector('#destroy-btn');

destroyBtn.addEventListener('click', () => {
  element.destroy();
});

Events

METHOD
DESCRIPTION
RETURNING VALUE
on:changeCalled when target element was changed.
  • strength number. Current level of strength (0 - 4). Default - 0
  • rules array. Current set of passed checks ("lowercase", "uppercase", "numbers", "special-characters")

Event usage

Assign an ID to the div that contains the data-strong-password attribute, and then use that ID to attach an event.

The example below demonstrates a use case of event usage. You can view the output in the console by typing in input.

An example where a function is run every time a value changes.

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