Change Password

Design Sample

Current Password

This password does not meet the minimum requirements below Current Password*

New Password

This password does not meet the minimum requirements below New Password*

Confirm New Password

Your passwords do not match Confirm New Password*

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">
  <fieldset>
    <legend>Current Password</legend>
    <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
      <span class="error-message">This password does not meet the minimum requirements below</span>
      <input type="password" name="current-password" id="current-password" placeholder="Enter your current password" maxlength="50" minlength="8" autocomplete="new-password">
      <label for="current-password">Current Password&#42;</label>
      <span toggle="#current-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>New Password</legend>
    <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
      <span class="error-message">This password does not meet the minimum requirements below</span>
      <input type="password" name="new-password" id="new-password" placeholder="Choose a password" maxlength="50" minlength="8" autocomplete="new-password">
      <label for="new-password">New Password&#42;</label>
      <span toggle="#new-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>Confirm New Password</legend>
    <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
      <span class="error-message">Your passwords do not match</span>
      <input type="password" name="confirm-password" id="confirm-password" placeholder="Confirm your password" maxlength="50" minlength="8" autocomplete="new-password">
      <label for="confirm-password">Confirm New Password&#42;</label>
      <span toggle="#confirm-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>
  <div class="button-box">
    <button class="button secondary color-one" onclick="goBack()"><span class="button-label">Cancel</span></button>
    <button class="button color-one"><span class="button-label">Submit<span class="post"><span class="processing"><i class="la la-refresh la-spin"></i></span></span></span></button>
  </div>
</form>