Password reset form

Reset a password

Reset password Please enter your new password

Password information

Length requirements
Character constraints, if any

Show my typing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend">Reset password</legend>
    <span>Please enter your new password</span>

    <div class="usa-alert usa-alert--info usa-alert--validation">
      <div class="usa-alert__body">
        <h3 class="usa-alert__heading">Password information</h3>
        <p class="usa-alert__text">
          Length requirements
          <br>
          Character constraints, if any
        </p>
      </div>
    </div>

    <label class="usa-label" for="password-reset">New password</label>
    <input class="usa-input" id="password-reset" name="password" type="password">

    <label class="usa-label" for="confirmPassword">Confirm password</label>
    <input class="usa-input" id="confirmPassword" name="confirmPassword" type="password">
    <p class="usa-form__note">
      <a href="javascript:void(0);"
        class="usa-show-multipassword"
        aria-controls="password-reset confirmPassword">Show my typing</a>
    </p>

    <input class="usa-button" type="submit" value="Reset password">
  </fieldset>
</form>

When to use a password reset form

  • Any time your site requires passwords for sign-in. To offer a way to easily reset a password any time users are able to sign in to your site.

Usability guidance

  • Users forget passwords. If users need a password to access your site, they will forget that password and need a way to reset it.
  • Be clear about password requirements. State any password requirements (for example, “Must include one capital letter”) up front. Don’t leave users guessing about password requirements, only to hit them with an error message later.
  • More about passwords: For more guidance on password requirements, see NIST's Appendix A—Strength of Memorized Secrets.

Accessibility

Implementation

Package information

  • Package usage: @import form-templates
  • Requires: required, global