FormsLesson 144Free preview

Toggle Password Visibility

This lesson is part of How To · All levels

Summary

This lesson discusses the key to display or hide the password you are typing. The implementation simply changes the type property on the input element between the password and the text, then updates the label or button icon. This feature helps to reduce typing errors, but should keep in mind security and accessibility.

Key points

The input.type property is changed between "password" and "text" to hide or display content
Use the type="button" button to avoid triggering the submit form
Update the air-label and air-pressed so that the button status is understood by the screen reader
Do not display the password by default and consider the risk of others seeing the screen

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.