Best Password Strength checker

May 5, 2019

Here are a bunch of password strength validation UX for signup pages designed by Alexandr Izumenko . Based on the dribbble shots by Josh Overton. There are four different styles to choose from:

1. The 1st one has a progress bar like interface that shows red, orange and green for varying strength of the password.
2. In the 2nd example the progress bar is divided into 3 section the 1st one is red for weak password and the second section turns orange for moderate password and the last section turns green for a strong password.
3. The bottom border of the password field changes color based on the password’s strength.
4. The entire border of the password field changes color based on the password’s strength.

See the Pen
Does the password strong?! by Alexandr Izumenko (@Izumenko)
on CodePen.