The Strong Password Component uses a visual progress bar to indicate password strength, motivating users to create stronger passwords during registration or when updating their settings.
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.
Use the specialCharactersSet property to specify a custom set of special characters. In below example, only &, !, and @ will satisfy the special character condition.
FlyonUI is powered by Preline’s unstyled, headless Tailwind plugins to deliver accessible and responsive user interfaces.
PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-strong-password
Enable 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
-
:stripClasses
Defines CSS classes for each strip.
-
-
:minLength
Specifies the minimum length required for a password.
number
6
:mode
Specifies the mode to be used. If “popover” is selected, the hints will be displayed as a popover.
default or popover
default
:popoverSpace
This option is available when the mode is set to “popover”. It specifies the space between the popover and the target element.
number
10
:checksExclude
Specifies which checks should be excluded. It accepts an array of strings, such as [“min-length”, “lowercase”, “uppercase”, “numbers”, “special-characters”].
array
[]
:specialCharactersSet
Specifies which special characters should be used for checking. It accepts a string containing the available characters, for example, “!%&”.
string
!"#$%&'()*+,-./:;<=>?@[\\\]^_`{}~
:hints
Specifies 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.