Figma forgot password page header examples

Password reset is a rescue operation. Nobody arrives here on purpose, everybody arriving is already mildly annoyed, and the flow has to work on a phone, in a hurry, with an inbox in the way.

That is a strong argument for making it the least decorated corner of your product. Four screens do the whole job, and this set draws each of them at both breakpoints.

Four steps under one property

The component set has a single property, Step, with values for forgot password, check email, set new password, and success, plus a sidebar version that reframes the same flow with a panel down one side. Each is drawn at 1,440px by 960px on desktop and 375px by 812px on mobile, and the whole set is duplicated in dark.

Keeping the four as variants rather than four loose frames matters more here than it sounds. The reset flow is the one designers copy between projects, and a variant set travels intact while a folder of frames arrives with the success screen missing.

Step 1 should not tell you whether the account exists

The first screen asks for an email address, and the reply is where teams leak information without noticing. "No account with that address" is friendly, and it hands anyone holding a list of emails a way to find out who uses your product.

The safer wording, and the one this layout is built around, is a confirmation that confirms nothing: if an account exists for that address, a link is on its way. Slightly worse for the honest user who mistyped, considerably better for everyone whose membership of your service is nobody else's business.

Reuse the same check-your-email screen your verification flow uses, so people who have seen one recognise the other.

Setting the new password

Step 3 decides whether the reset finishes. Show the rules before anyone types instead of after they fail, offer a visibility toggle, and prefer a strength meter to a list of rejections, all of which Nielsen Norman Group's password creation research argues for directly.

Then look hard at the rules themselves. NIST's guidance advises against forcing mixtures of character types and puts the minimum at eight characters, which means many of the symbol requirements still in production are making passwords harder to remember without making them harder to crack.

Blocking paste is worse again: it defeats password managers, and WCAG 2.2's accessible authentication criterion counts it as a conformance failure. The input components supply the helper and error text these screens hang the rules on.

The success screen has a job

Step 4 is not a formality. It confirms the password changed, which is the thing the person actually wanted to know, and it is the natural place to send them back to log in or, better, into the product already signed in.

Two details are worth adding beyond the layout: say that other sessions have been signed out if they have, and send a separate notification email about the change, since an unexpected reset confirmation is how people find out their account is under attack.

The email templates cover that message, and getting it visually consistent with the reset screens is what stops it looking like the phishing attempt it is warning about.

When it is time to build, the same screens exist in code. Untitled UI React forgot password pages are open source, built with Tailwind CSS and React Aria, with the field states and step transitions handled for you.