Password Requirements

Due to the strict requirements for user passwords associated with insurance claims, we choose to display the requirements in a list. When possible, we can add .valid or .invalid classes to the items in the list to provide the user with visual feedback regarding their selections (see below).

Design Sample

Passwords must match
Passwords must contain between 8–50 characters
Passwords must contain least 1 upper-case letter
Passwords must contain least 1 lower-case letter
Passwords must contain least 1 number
Passwords must contain least 1 of the following characters: ! @ # $ % ^ & * ( ) ' - + , . / : ; < = > ? [ ] _ ` { } | \

html

<ul class="requirements md">
  <!-- change li class from default to valid or invalid as necessary -->
  <li class="default">Passwords must match&nbsp;
    <span>
      <i class="la la-circle"></i>
      <i class="la la-check-circle"></i>
      <i class="la la-exclamation-circle"></i>
    </span>
  </li>
  <li class="default">Passwords must contain between 8&#8211;50 characters&nbsp;
    <span>
      <i class="la la-circle"></i>
      <i class="la la-check-circle"></i>
      <i class="la la-exclamation-circle"></i>
    </span>
  </li>
  <li class="default">Passwords must contain least 1 upper&#45;case letter&nbsp;
    <span>
      <i class="la la-circle"></i>
      <i class="la la-check-circle"></i>
      <i class="la la-exclamation-circle"></i>
    </span>
  </li>
  <li class="default">Passwords must contain least 1 lower&#45;case letter&nbsp;
    <span>
      <i class="la la-circle"></i>
      <i class="la la-check-circle"></i>
      <i class="la la-exclamation-circle"></i>
    </span>
  </li>
  <li class="default">Passwords must contain least 1 number&nbsp;
    <span>
      <i class="la la-circle"></i>
      <i class="la la-check-circle"></i>
      <i class="la la-exclamation-circle"></i>
    </span>
  </li>
  <li class="default">Passwords must contain least 1 of the following characters: &#x21;&#x20;&#x40;&#x20;&#x23;&#x20;&#x24;&#x20;&#x25;&#x20;&#x5e;&#x20;&#x26;&#x20;&#x2a;&#x20;&#x28;&#x20;&#x29;&#x20;&#x27;&#x20;&#x2d;&#x20;&#x2b;&#x20;&#x2c;&#x20;&#x2e;&#x20;&#x2f;&#x20;&#x3a;&#x20;&#x3b;&#x20;&#x3c;&#x20;&#x3d;&#x20;&#x3e;&#x20;&#x3f;&#x20;&#x5b;&#x20;&#x5d;&#x20;&#x5f;&#x20;&#x60;&#x20;&#x7b;&#x20;&#x7d;&#x20;&#x7c;&#x20;&#x5c;&#x20;&nbsp;
    <span>
      <i class="la la-circle"></i>
      <i class="la la-check-circle"></i>
      <i class="la la-exclamation-circle"></i>
    </span>
  </li>
</ul>

Password Requirements Validation States

Design Sample

Passwords must match
Passwords must contain between 8–50 characters

Notes

As with other components in the design system, it is possible to add validation conditions the <li> elements. Simply change the <li> class from <default> to either .valid or .invalid.

html

<ul class="requirements md">
  <!-- change li class from default to valid or invalid as necessary -->
  <li class="invalid">Passwords must match&nbsp;
    <span>
      <i class="la la-circle"></i>
      <i class="la la-check-circle"></i>
      <i class="la la-exclamation-circle"></i>
    </span>
  </li>
  <li class="valid">Passwords must contain between 8&#8211;50 characters&nbsp;
    <span>
      <i class="la la-circle"></i>
      <i class="la la-check-circle"></i>
      <i class="la la-exclamation-circle"></i>
    </span>
  </li>
</ul>