1. Components
  2. Strong Password

Advanced Forms

Tailwind CSS Strong Password

Strong Password Component visually indicates password strength with a progress bar, encouraging stronger credentials during user registration and settings.

Requires JS

Note that this component requires the use of our Strong Password plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

Basic usage

A basic usage of strong password.

minLength

Use minLength to set minimum amount of characters. In this example it's set to 8

With Indicator and Hints

With level of indicator and hints.

Level:

Your password must contain:

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

Working with Popover

Requires JS

Note that this component requires the use of our Tooltip & Popover plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

With level of indicator and hints in Popover.

API

Use "specialCharactersSet": to set custom special characters.

Destroy and Reinitialize New

Provides destroy method that helps to destroy 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.