Password

This component is a special extension from the Input Icon. This component also adds Form Note and Floating Label.

Together, it creates a password field, with an

“show as plain text”-function
validate input based on pattern
show error message when input is wrong
show success state when input matches the password regular expression

The following code examples shows how to use form group:

<div class="form-group form-group--icon" data-sg-password>
  <div class="floating-label">
    <div class="form-note">
      <input type="password" class="input" id="password" placeholder="password" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$">
      <label class="floating-label__label" for="password">Enter a Password</label>
      <label class="form-note__danger" for="password">Please use UpperCase, LowerCase, Number/SpecialChar and min 8 Chars.</label>
    </div>
  </div>
  <div class="form-group__icon icon icon--eye pointer" data-sg-tooltip="Show password in plain text."></div>
</div>

The following list describe all existing block/element/modifier classes of the component.

[data-sg-password] - required if this data attribute is set, the scripting adds the show/hide text function

Basic Example:

Theme basic Screen size XL

html