<form class="usa-form">
    <fieldset>
        <legend class="usa-drop_text">Reset password</legend>
        <span class="usa-serif">Please enter your new password</span>

        <div class="usa-alert usa-alert-info">
            <div class="usa-alert-body">
                <h3 class="usa-alert-heading">Passwords must:</h3>
            </div>
            <ul class="usa-checklist" id="validation_list">
                <li data-validator="length">Be at least 8 characters</li>
                <li data-validator="uppercase">Have at least 1 uppercase character</li>
                <li data-validator="numerical">Have at least 1 numerical character</li>
                <li>Another requirement</li>
            </ul>
        </div>

        <label for="password">New password</label>
        <input id="password" name="password" type="password" aria-describedby="validation_list" class="js-validate_password" data-validate-length=".{8,}" data-validate-uppercase="[A-Z]" data-validate-numerical="\d" data-validation-element="#validation_list">

        <label for="confirmPassword">Confirm password</label>
        <input id="confirmPassword" name="confirmPassword" type="password">
        <p class="usa-form-note">
            <a href="#" class="usa-show_multipassword" aria-controls="password confirmPassword">Show my typing</a>
        </p>

        <input type="submit" value="Reset password">
    </fieldset>
</form>
  • Handle: @password-reset-form
  • Preview:
  • Filesystem Path: src/components/forms/layouts/password-reset-form/password-reset-form.hbs