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:
- The 1st one has a progress bar like interface that shows red, orange and green for varying strength of the password.
- 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.
- The bottom border of the password field changes color based on the password’s strength.
- 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.