Templates

Sign-in form

Sign a user in to a website or application.

Access your account

Email address 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
    />
    <button
      title=""
      type="button"
      class="usa-show-password"
      aria-controls=""
      data-show-text="Show password"
      data-hide-text="Hide password"
    >
      Show password
    </button>
    <input class="usa-button" type="submit" value="Sign in" />
    <p>
      <a href="javascript:void()" title="Forgot password">Forgot password?</a>
    </p>
  </fieldset>
</form>

<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
    />
    <button
      title=""
      type="button"
      class="usa-show-password"
      aria-controls=""
      data-show-text="Show password"
      data-hide-text="Hide password"
    >
      Show password
    </button>
    <input class="usa-button" type="submit" value="Sign in" />
    <p>
      <a href="javascript:void()" 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 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.
• 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

• Package usage: @forward "usa-form-templates";