Password Strength Validator
Upgrade your signup or login form with a modern password strength meter that reacts in real time. As users type, the strength bar updates from weak to strong and each requirement in the checklist receives a clear checkmark or X. The layout is clean, responsive, and built to match any style.
Features
• Live password strength indicator with color states
• Requirement checklist with automatic checkmarks and X marks
• Show or hide password toggle
• Customizable rules such as minimum length, uppercase letters, and more
• Optional strict mode if all requirements must be met
• Adjustable strength bar colors for every state 🎨
• Includes a second variant with full color, style, and layout customization
Perfect for
• Signup forms and onboarding flows
• Login pages
• Account security settings
• SaaS dashboards
• Any project that needs clear password guidance
How to use
• Paste the component into your signup or login form
• Set your password rules in the properties panel
• Customize the strength bar color for weak, fair, good, and strong
• Enable or disable strict mode depending on your security level
• Turn on the show or hide password toggle for improved UX
This component adds clarity, trust, and a professional feel to your forms. The included customizable variant lets you adapt the visuals to any brand, from soft gradients to bold security-focused themes.
John Valentine
