Sign in – Energy Saving Trust Design System

Use this pattern when users need to access a private service area with an email address and password. It combines existing form controls, a primary action, recovery link and validation feedback.

Canonical example

<form action="/sign-in" method="post" novalidate>
  <h1>Sign in to your account</h1>

  <div class="est-error-summary" role="alert" tabindex="-1" aria-labelledby="sign-in-error-title">
    <h2 class="est-error-summary-title" id="sign-in-error-title">There is a problem</h2>
    <ul class="est-error-summary-list">
      <li><a href="#sign-in-email">Enter an email address</a></li>
    </ul>
  </div>

  <label class="form-label" for="sign-in-email">Email address</label>
  <div class="form-text" id="sign-in-email-hint">Use the email address linked to your account.</div>
  <div class="invalid-feedback d-block" id="sign-in-email-error">Enter an email address</div>
  <input class="form-control is-invalid" id="sign-in-email" name="email" type="email"
    autocomplete="email" inputmode="email"
    aria-describedby="sign-in-email-hint sign-in-email-error" aria-invalid="true">

  <label class="form-label" for="sign-in-password">Password</label>
  <input class="form-control" id="sign-in-password" name="password" type="password"
    autocomplete="current-password">

  <div class="form-check">
    <input class="form-check-input" id="sign-in-remember-me" name="remember-me" type="checkbox" value="yes">
    <label class="form-check-label" for="sign-in-remember-me">Remember me on this device</label>
  </div>

  <p><a href="/forgot-password">Forgot your password?</a></p>

  <button class="btn btn-primary" type="submit">Sign in</button>
</form>

Content and behaviour guidance

Use concise labels and plain-language errors that explain what to do next. Validate after submit, then move keyboard focus to the error summary when submission fails. Link each summary item to the relevant field and keep inline errors next to their controls.

Use sentence case for button and link text. Keep sign-in content focused on account access and avoid combining registration journeys in the same form.

Accessibility

Always provide visible labels and keep hint text programmatically associated through aria-describedby. Use autocomplete attributes for credentials to support password managers.

Maintain a logical keyboard order: email, password, remember me, forgot password, then submit. Do not rely on colour for error communication and keep all error text visible to assistive technology.