18F/web-design-standards

<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">

    {% include "@components/_usa-password/src/usa-password.twig" with {
      'toggle': {
        'title': 'toggle password',
        'aria_controls': 'password-reset confirmPassword',
        'text': {
          'show': 'Show my typing',
          'hide': 'Hide my typing'
        }
      }
    }
    %}

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