Sign in

Sign in forms allow users to input authentication details (typically a username or email and password) in order to gain access to password protected content and functionality.

Best practices

  • Wherever possible, users should be permitted to use an email address or phone number as their username.
  • Auto focus on the first input field in the form. This saves time and effort and moves the user directly to the first field.
  • Give users the option to see their password as they enter it. This helps reduce input error and can be enabled by a checkbox, toggle, or icon.
  • Always include links to recovery options like ‘Forgot password’ and ‘Forgot username’ (where applicable).
  • Warn users if caps lock is on.

Example

Sign in


<h2>Sign in</h2>
<form>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="email">Email</label>
        <input id="email" type="email" class="form-control focusOnLoad">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <div class="input-group">
          <input id="passwordInput" type="password" class="form-control">
          <div class="input-group-append input-group-addon">
            <button id="passwordToggle" class="btn btn-outline-secondary" type="button"><i aria-label="Hide/show password" class="far fa-eye"></i></button>
          </div>
        </div>
        <button class="pl-0 btn btn-link">Forgot password?</button>
      </div>
      <div class="form-group">
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="remember">
          <label class="custom-control-label" for="remember">Remember me</label>
        </div>
      </div>
      <div class="form-group mt-4">
        <input disabled class="btn btn-primary" type="submit" value="Sign in">
      </div>
    </div>
  </div>
</form>

Add the following JavaScript for the hide/show password functionality:

$("#passwordToggle").click(function(){
  $("#passwordToggle i").toggleClass('fa-eye fa-eye-slash')
  if($("#passwordInput").attr("type") == 'password'){
    $("#passwordInput").attr("type", "text");
  }else{
    $("#passwordInput").attr("type", "password");
  }
});

To auto focus an input on load use the focusOnLoad class on your input and include the following JavaScript:

$('.focusOnLoad').focus();