Templates

Sign-in

Provide users with a clear and uncluttered sign-in experience.

<a class="usa-skipnav" href="#main-content">Skip to main content</a>
  






<section class="usa-banner" aria-label="Official government website">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag">
        </div>
        <div class="grid-col-fill tablet:grid-col-auto">
          <p class="usa-banner__header-text">An official website of the United States government</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner__button-text">Here’s how you know</span>
        </button>
      </div>
    </header>
    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
      <div class="grid-row grid-gap-lg">
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
          <div class="usa-media-block__body">
            <p>
              <strong>
                Official websites use .gov
</strong>
              <br/>
              A <strong>.gov</strong> website belongs to an official government organization in the United States.

            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" role="img" alt="" aria-hidden="true">
          <div class="usa-media-block__body">
            <p>
              <strong>
                Secure .gov websites use HTTPS
</strong>
              <br/>
              A <strong>lock</strong> (
<span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-title banner-lock-description" focusable="false"><title id="banner-lock-title">Lock</title><desc id="banner-lock-description">A locked padlock</desc><path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"/></svg></span>
) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


  

<header class="usa-header usa-header--extended"><div class="usa-navbar">
  <div class="usa-logo" id="extended-logo">
    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
  </div>
  </div>
</header>

  

<main id="main-content">
  <div class="bg-base-lightest">
    <section class="grid-container usa-section">
      <div class="grid-row flex-justify-center">
        <div class="grid-col-12 tablet:grid-col-8 desktop:grid-col-6">
          <div class="bg-white padding-y-3 padding-x-5 border border-base-lighter">
            <h1 class="margin-bottom-0">Sign in</h1>
            <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>
          </div>
          <p class="text-center">Don’t have an account? <a class="usa-link" href="javascript:void(0);">Create your account now</a>.</p>
          <div class="border-top border-base-lighter margin-top-3 padding-top-1">
  <h2>Are you a federal employee?</h2>
  <div class="usa-prose">
    <p>If you are a federal employee or [other secondary user], please use [secondary Single Sign On (SSO)].</p>
    <p><a class="usa-button usa-button--outline" href="javascript:void()">Launch secondary SSO</a></p>
  </div>
</div>
        </div>
      </div>
    </section>
  </div>
</main>

Guidance

When to use the sign-in template

  • Users have accounts directly on your website. This template is intended for agencies who have a self-hosted authentication system and need a design that’s simple, usable, and mobile-friendly.

When to consider something else

  • Your agency uses a third-party authentication system. If you’re leveraging a shared service, follow the sign-in guidelines from that service. For example, login.gov recommends placing a “sign-in” link in the header of your website that takes users through the entire “sign in” or “create an account” experience on the login.gov site.

Usability guidance

  • Clearly provide a way to reset passwords or recover usernames. Provide a clearly marked link for users to reset a password or recover a forgotten username.
  • Provide secure error feedback. If a sign-in attempt fails, let users know there was an error, but don’t indicate which field was invalid, for example “Incorrect password” or “Username not found.” This helps maintain stronger protection against hackers and unauthorized users.
  • Help users focus on the task. Remove extraneous content to minimize distractions.
  • Use specific field labels. If you’re asking for a username, say username. If it’s an email, say email address. Don’t make the user guess which one you mean.
  • Allow users to toggle password visibility. This helps ensure users are entering passwords correctly while maintaining privacy when needed.
  • Enable copy/paste. Many users rely on password generators because they provide secure passwords and phrases they don’t have to memorize. Forcing manual entry is a barrier to usability and can cause mistakes.
  • Use consistent, accurate language. Use “sign in” if it’s a verb (like a link in a call-to-action or button) or “sign-in” if it’s a noun or adjective (like “sign-in page”). Don’t use “login” or “log in.”
  • Allow users to switch between creating an account and signing in. Users should be able to easily find where to sign in from the create account page, and vice versa. This also applies to the global header of the site, where users should have “one-click” access to either the sign-in or create an account page.

Components used in this template