Element Framework

Password Field

  • HTML
  • JS
  • CSS
<ef-panel>
  <ef-header level="3">Password Recommendation</ef-header>
  <ul>
    <li>At least 8 characters&#x2014;the more characters, the better.</li>
    <li>At least one uppercase and lowercase letters.</li>
    <li>At least one number.</li>
    <li>At least one special character.</li>
  </ul>
</ef-panel>

<p>Password</p>
<ef-password-field id="pw" pattern="^(?=.*[A-Z])(?=.*[!@#$&amp;*])(?=.*[0-9])(?=.*[a-z]).{8,}$"></ef-password-field>
<br>
<p>Confirm password</p>
<ef-password-field id="confirmedPw" pattern="^(?=.*[A-Z])(?=.*[!@#$&amp;*])(?=.*[0-9])(?=.*[a-z]).{8,}$"></ef-password-field>

<ul id="error-list">
  <li id="password-error">Password does not match</li>
  <li id="pattern-error">Password does not meet criteria</li>
</ul>
var pw = document.getElementById('pw');
var confirmedPw = document.getElementById('confirmedPw');
var passwordMatchError = document.getElementById('password-error');
var patternError = document.getElementById('pattern-error');

passwordMatchError.style.display = 'none';
patternError.style.display = 'none';


confirmedPw.addEventListener('value-changed', function(e) {
  if (e.detail.value !== pw.value) {
    passwordMatchError.style.display = 'list-item';
  } else {
    passwordMatchError.style.display = 'none';
  }
});

confirmedPw.addEventListener('error-changed', function(e) {
  if (e.detail.value) {
    patternError.style.display = 'list-item';
  } else {
    patternError.style.display = 'none';
  }
});
ef-panel {
  max-width: 450px;
}

ef-password-field {
  width: 250px;
}

p {
  margin: 4px 0;
}

ul {
  padding-inline-start: 24px;
}

#password-error,
#pattern-error {
  color: #d94255;
}

ef-password-field is a form control for passwords with a built-in show/hide toggle functionality.

Basic usage

ef-password-field behaves similarly to the native password input. It has password masking that allows users to securely type their passwords into the input.

<ef-password-field placeholder="Password ..."></ef-password-field>

Getting value

The value can be accessed through the value property.

<ef-password-field id="password-input"></ef-password-field>
var passwordInput = document.getElementById("password-input");
passwordInput.value; // User's input password

You can also listen for the value-changed event, which triggers whenever the value changes due to user interactions.

  • HTML
  • JS
  • CSS
<ef-password-field id="password-input" placeholder="Type something here .."></ef-password-field>
<p>Value: <code id="value-text"></code></p>
var element = document.getElementById("password-input");
var valueChangedText = document.getElementById('value-text');

element.addEventListener("value-changed", function(e) {
  valueChangedText.innerHTML = e.detail.value;
});
ef-password-filed {
  width: 172px;
}
<ef-password-field id="password-input"></ef-password-field>
<p>Value: <code id="value-text"></code></p>
var element = document.getElementById("password-input");
var valueChangedText = document.getElementById("value-text");

element.addEventListener("value-changed", function (e) {
  valueChangedText.innerHTML = e.detail.value;
});

Input validation

Validation occurs when the constraints are provided and the value changes. If the error state changes, it will dispatch an error-changed event along with the current error state.

Alternatively, you can access the error property to check if the input is valid or not.

Input length

The maxlength attribute limits the number of characters that can be typed into the input, and the minlength attribute sets the minimum of characters. ef-password-field will show error styles if a condition is not met.

  • HTML
  • JS
  • CSS
<ef-password-field id="passwordInput" minlength="8" maxlength="16" placeholder="Between 8 to 16 characters"></ef-password-field>
<p id="error-text"></p>
var element = document.getElementById("passwordInput");
var errorChangedText = document.getElementById('error-text');
element.addEventListener("error-changed", function(e) {
  if (e.detail.value) {
    errorChangedText.innerHTML = "Password length must be between 8 - 16 characters";
  } else {
    errorChangedText.innerHTML = "";
  }
});
#error-text {
  color: #d94255;
}

ef-password-field {
  width: 200px;
}
<ef-password-field id="passwordInput" minlength="8" maxlength="16"></ef-password-field>
<p id="error-text"></p>
var element = document.getElementById("passwordInput");
var errorChangedText = document.getElementById("error-text");

element.addEventListener("error-changed", function (e) {
  if (e.detail.value) {
    errorChangedText.innerHTML = "Password length must be between 8 - 16 characters.";
  } else {
    errorChangedText.innerHTML = "";
  }
});

Pattern

You can use a regular expression to validate the input value by setting it to the pattern attribute.

  • HTML
  • JS
  • CSS
<ul>
  <li>At least 8 characters&#x2014;the more characters, the better.</li>
  <li>At least one uppercase and lowercase letters.</li>
  <li>At least one number.</li>
  <li>At least one special character.</li>
</ul>
<ef-password-field id="password" pattern="^(?=.*[A-Z])(?=.*[!@#$&amp;*])(?=.*[0-9])(?=.*[a-z]).{8,}$"></ef-password-field>
<p id="error-text"></p>
var element = document.getElementById("password");
var errorChangedText = document.getElementById("error-text");
element.addEventListener("error-changed", function(e) {
  if (e.detail.value) {
    errorChangedText.innerHTML = "Password is too weak.";
  } else {
    errorChangedText.innerHTML = "";
  }
});
#error-text {
  color: #d94255;
}

ef-password-field {
  width: 275px;
}
<ef-password-field
  id="password"
  pattern="^(?=.*[A-Z])(?=.*[!@#$&*])(?=.*[0-9])(?=.*[a-z]).{8,}$"
></ef-password-field>
<p id="error-text"></>
var element = document.getElementById("password");
var errorChangedText = document.getElementById("error-text");
element.addEventListener("error-changed", function (e) {
  if (e.detail.value) {
    errorChangedText.innerHTML = "Password is too weak.";
  } else {
    errorChangedText.innerHTML = "";
  }
});

API Reference

Attributes

string
pattern
Set regular expression for input validation
string
placeholder
Set placeholder text
boolean
error
Set state to error
boolean
warning
Set state to warning
boolean
transparent
Disables all other states and border/background styles. Use with advanced composite elements requiring e.g. multi selection in combo-box when parent container handles element states.
number | null
minlength
Set character minimum limit
number | null
maxlength
Set character maximum limit
string
value
Input's value
boolean
readonly
Set readonly state
boolean
disabled
Set disabled state

Properties

string
pattern
Set regular expression for input validation
""
string
placeholder
Set placeholder text
""
boolean
error
Set state to error
false
boolean
warning
Set state to warning
false
boolean
transparent
Disables all other states and border/background styles. Use with advanced composite elements requiring e.g. multi selection in combo-box when parent container handles element states.
false
number | null
minLength
Set character minimum limit
number | null
maxLength
Set character maximum limit
string
value
Input's value
""
boolean
readonly
Set readonly state
false
boolean
disabled
Set disabled state
false

Methods

select()
Select the contents of input

Events

value-changed
Dispatched when value changes
error-changed
Dispatched when error state changes