Templates

Password reset form

Reset a password.

Reset password

Please enter your new password

Password information

Length requirements
Character constraints, if any

New password Confirm password

<form class="usa-form">
  <legend class="usa-legend usa-legend--large">Reset password</legend>
  <fieldset class="usa-fieldset">
    <legend>Please enter your new password</legend>
    <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"
    />
    <button
      title="toggle password"
      type="button"
      class="usa-show-password"
      aria-controls="password-reset confirmPassword"
      data-show-text="Show my typing"
      data-hide-text="Hide my typing"
    >
      Show my typing
    </button>
    <input class="usa-button" type="submit" value="Reset password" />
  </fieldset>
</form>

<form class="usa-form">
  <legend class="usa-legend usa-legend--large">Reset password</legend>
  <fieldset class="usa-fieldset">
    <legend>Please enter your new password</legend>
    <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"
    />
    <button
      title="toggle password"
      type="button"
      class="usa-show-password"
      aria-controls="password-reset confirmPassword"
      data-show-text="Show my typing"
      data-hide-text="Hide my typing"
    >
      Show my typing
    </button>
    <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 guidance

• As you customize this form template, make sure it continues to follow the accessibility guidelines for form templates and the accessibility guidelines for form controls.

Using the password reset form template

• For guidance on the technical details of validation, see the validation component documentation.

Package

• Package usage: @forward "usa-form-templates";