Templates

Password reset form

Reset a password.

Reset password Please enter your new password

Password information

Length requirements
Character constraints, if any

Show my typing

<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">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>

Guidance

When to use the password reset form template

  • 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

Using the password reset form template

Package

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