Log In

Design Sample

Notes

As with other components in the design system, it is possible to add validation conditions to any <input>. Simply add a .valid or .invalid class to the .field class.

html

<form class="sm" novalidate>
  <fieldset>
    <legend>Email Address</legend>
    <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
      <span class="error-message"></span>
      <input type="email" name="email-address" id="email-address" class="email-address" placeholder="Enter your email address">
      <label for="email-address">Email Address&#42;</label>
    </div>
  </fieldset>
  <fieldset>
    <legend>Password</legend>
    <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
      <span class="error-message">This password is not correct. Please try again.</span>
      <input type="password" name="password" id="password" placeholder="Choose a password" maxlength="50" minlength="8" autocomplete="new-password">
      <label for="password">Password&#42;</label>
      <span toggle="#password" class="la la-eye-slash show-hide-password"></span>
      <span class="valid password"><i class="la la-check-circle-o"></i></span>
    </div>
  </fieldset>
  <fieldset>
    <legend>Remember Me</legend>
    <div class="field"> <!-- change class to 'field valid' or 'field invalid' as necessary -->
      <span class="error-message checkbox"></span>
      <input type="checkbox" name="remember-me" id="remember-me">
      <label class="checkbox" for="remember-me" style="justify-content: space-between; width: 100%;">Remember me<span><a href="#!">Forgot Password?</a></span></label>
    </div>
  </fieldset>
  <div class="button-box">
    <button class="button color-one"><span class="button-label">Log In<span class="post"><span class="processing"><i class="la la-refresh la-spin"></i></span></span></span></button>
  </div>
</form>