Templates
Password reset form
Reset a 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>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";
Latest updates
Meaningful code and guidance updates are listed in the following table:
| Date | USWDS version | Affects | Description |
|---|---|---|---|
| 2025-03-07 | 3.12.0 |
|
Replaced |
