How to toggle password visibility in forms using Bootstrap-icons ?
Passwords are those input types that appear as ******. It can be shown to the user by adding a feature of the eye icon so that the user can see the password.
In this article, we will learn how to toggle password visibility using Bootstrap.
- We will use few classes of Bootstrap-icons – bi, bi-eye-slash, and bi-eye.
- We will toggle the type of input field of password ( text to password and password to text ).
Files to be imported:
For the icons in the input field ( Eye Icon)
<link rel=”stylesheet” href=”https://firstname.lastname@example.org/font/bootstrap-icons.css” />
To style form elements, like button, adding padding, etc
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>
- We are fetching the id of the password using the getAttribute() method and determining its type. This fetching is done when an event (click) is created.
- If it is text then convert it into the password.
- If it is a password then convert it to text.
- Conversion is done using setAttribute() method.