Skip to main content

Input - Password

A password input is a single-line text field with iconography and behaviors to support password functionality.

BetaInput - Password replaces the password type of input from v1.

Code documentation

Web

Anatomy

The password input component is made up of 13 elements.

Anatomy diagram numbering 13 elements of a password input.
  1. Label
  2. Optional indicator
  3. Password visibility button
  4. Counter
  5. Clear button
  6. Value
  7. Left slot
  8. Helper text
  9. Required indicator
  10. Current value length
  11. Max value length
  12. Counter divider
  13. Error text

Variants

Password input extends the input component which allows for the use of its properties, events, slots, methods, and styles. Refer to the input documentation for detailed information on these features.

The following variants are unique features to password input.

Password visible

The password can be revealed using the button placed in the right slot. The button icon changes to reflect the visibility state you want to trigger, not what is currently active. In other words, when the password is visible, the icon will display an eye with a slash to denote the password will become hidden when the button is clicked again.

Two inputs are displayed. The top input displays a password masked with bullet characters and a button with an eye. The bottom input displays the actual characters of a mock password. The corresponding button displays an eye with a slash mark through it.

Alternate icons can be slotted into the visibility button if thematic customizations are required.