Password Strength Form
Change password card with current and new fields, a live requirement checklist, a four segment strength meter, a confirm field, and a footer action.
Change password card with current and new fields, a live requirement checklist, a four segment strength meter, a confirm field, and a footer action.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Password Strength Form is a change password card with a live requirement checklist. Current password, new password, and confirm fields stack inside one card. As the new password is typed, four rules tick off (at least 12 characters, mixed case, a number, and a symbol) and a four segment strength meter fills from Too weak to Strong, with the plain language label sitting in the field row.
The rules live in a typed array, each carrying a test function, and the count of passing rules drives both the meter segments and the checklist icons. The confirm field reports a mismatch inline the moment the two values diverge, and Update password stays disabled until every rule passes and the passwords match. The footer notes that other active sessions stay signed in until they expire.
Reach for this block on a security settings page or an account recovery flow, wired to your password policy and change endpoint. Copy the rule array into your validator so the checklist and the server enforce the exact same rules, never two different sets.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the in-app change password card. Other strength checked fields:
Tip: keeping submit disabled until every rule passes is what stops a weak password reaching the server at all.