Sign-in form

Sign a user in to a website or application

Sign in or create an account

Show password

Forgot username?

Forgot password?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend">Sign in</legend>
    <span>or <a href="javascript:void(0);">create an account</a></span>

    <label class="usa-label" for="username">Username or email address</label>
    <input class="usa-input" id="username" name="username" type="text" autocapitalize="off" autocorrect="off">

    <label class="usa-label" for="password-sign-in">Password</label>
    <input class="usa-input" id="password-sign-in" name="password" type="password">
    <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 username">
      Forgot username?</a></p>
    <p><a href="javascript:void(0);" title="Forgot password">
      Forgot password?</a></p>
  </fieldset>
</form>

When to use a sign-in form

  • 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

  • Customize accessibly. 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.
  • Give adequate advance notice before automatic sign-out. Don’t automatically sign out a user without giving them 20 seconds' advance notice to request more time. Users with disabilities sometimes require more time to respond to prompts.

Package information

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