Templates

Sign-in form

Sign a user in to a website or application.

Access your account

Show password

Forgot password?

<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Access your account</legend>
    <label class="usa-label" for="email">Email address</label>
    <input class="usa-input" id="email" name="email" type="email" autocapitalize="off" autocorrect="off" required>
    <label class="usa-label" for="password-sign-in">Password</label>
    <input class="usa-input" id="password-sign-in" name="password" type="password" required>
    <p class="usa-form__note">
      <a title="Show password" href="javascript:void(0);"
        class="usa-show-password"
        aria-controls="password-sign-in">Show password</a>
    </p>
    <input class="usa-button" type="submit" value="Sign in">
    <p><a href="javascript:void(0);" title="Forgot password">
      Forgot password?</a></p>
  </fieldset>
</form>

Guidance

When to use the sign-in form template

  • Accessing customized or private content. When users expect information to be customized or private, place it behind a sign-in form.

When to consider something else

Accessing public content. Allow users to access as much as of your online services as possible without having to sign in. Sign-in forms are a barrier between users and the content they want.

Usability guidance

  • Less is more. Make your explanations concise. Users sign in faster when less text surrounds the form.
  • Allow email addresses to sign in. People have an easier time remembering their email address than they do a unique username.
  • Consider keeping users signed in. If you must include a sign-in form, consider allowing users to stay logged in (“Remember me”) on trusted computers so they can avoid this barrier in the future.
  • Make it easy to retrieve forgotten sign-in info. Most authentication failures occur because a user has forgotten their username or password. This is especially common when a long time passes between visits, as is the case with most federal websites.
  • Toggle password masking. Password masking (replacing what the user types with a generic symbol) makes it more likely that users will make mistakes when trying to sign in, and doesn’t offer much in the way of additional security. Allow users to unmask the password field so they can see what they type. This is especially useful on mobile devices, when users are more likely to mistype.

Accessibility

Package

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