Change Password Card
A three field password form beside a live requirements checklist, a segmented strength meter, the last changed date, and a passkey suggestion.
A three field password form beside a live requirements checklist, a segmented strength meter, the last changed date, and a passkey suggestion.
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
Change Password Card splits the update into two columns: a labeled three field form (current, new, confirm) with a forgot link and a save bar showing the last changed date, beside a live panel with a segmented strength meter, a requirements checklist covering length, case, number, symbol, and reuse, and a passkey suggestion. The Update button stays disabled until every requirement is met.
Requirements are a typed const array whose met flags match the drafted new password, so the checklist reads honestly with one item still open. A small strengthScore feeds the four segment meter without any live typing logic.
Reach for this block on the account security page, wired to your password endpoint. Validate the same rules server-side, and gate the save button on the requirement states rather than trusting the client checklist alone.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the account password change. Other credential panels:
Tip: gate the save button on the requirement states, not a guess, so users see exactly which rule still blocks them.