29Reset password

Two tiny screens: request (email only) and set-new-password. The confirmation reads identically whether or not the account exists — the reset flow must never be an account-existence oracle.

Use it for

Forgot-password request and the link's landing screen

Not for

Changing a known password — account settings, with the current password asked

Request

reset password

Forgot your password?

Remembered it? Back to sign in

markup

<div class="ns-auth__card" style="max-inline-size:22rem">
  <p class="ns-auth__kicker">reset password</p>
  <h2 class="ns-auth__title" style="font-size:var(--size-h3)">Forgot your password?</h2>
  <form class="ns-auth__form" onsubmit="return false">
    <div class="ns-field">
      <label class="ns-field__label" for="rp-e">Email address</label>
      <input class="ns-input" id="rp-e" type="email" autocomplete="email">
      <p class="ns-field__help">We'll send a reset link — it expires in one hour.</p>
    </div>
    <button class="ns-btn ns-btn--primary ns-btn--block" type="submit">Send reset link</button>
  </form>
  <p class="ns-auth__alt">Remembered it? <a href="#">Back to sign in</a></p>
</div>

Sent confirmation

Replaces the form; identical wording whether or not the account exists.

Check your inbox

If an account exists for you@example.com, a reset link is on its way. It expires in one hour.

markup

<div class="ns-auth__sent" role="status" style="max-inline-size:22rem">
  <p class="ns-auth__sent-title"><i class="ph ph-check-circle" aria-hidden="true"></i> Check your inbox</p>
  <p>If an account exists for <code>you@example.com</code>, a reset link is on its way. It expires in one hour.</p>
</div>

Set new password

reset password

Choose a new password

markup

<div class="ns-auth__card" style="max-inline-size:22rem">
  <p class="ns-auth__kicker">reset password</p>
  <h2 class="ns-auth__title" style="font-size:var(--size-h3)">Choose a new password</h2>
  <form class="ns-auth__form" onsubmit="return false">
    <div class="ns-field">
      <label class="ns-field__label" for="np-1">New password</label>
      <input class="ns-input" id="np-1" type="password" autocomplete="new-password">
    </div>
    <div class="ns-field">
      <label class="ns-field__label" for="np-2">Repeat it</label>
      <input class="ns-input" id="np-2" type="password" autocomplete="new-password">
    </div>
    <button class="ns-btn ns-btn--primary ns-btn--block" type="submit">Set password &amp; sign in</button>
  </form>
</div>

Accessibility contract

The confirmation is role="status" and echoes the typed address in mono so the user can catch their own typo
autocomplete="new-password" on both fields of the set screen