How to Show or Hide Passwords (Beginners)

Tips
1

How to show or hide passwords without using a plugin (using States)

  1. You need Two input fields On with content Type Text and the other with content Type password
  2. Input Content Type password should be set as visible on page load
  3. Input Content Type Text should be set too not visible on page load
  4. You will need an eye icon (Choose the icon and search for eye)
  5. Create a state for the icon (yes or no type) set default state to “no”
  6. Set a condition on the icon as follows
    a. when icon state (In 5 above) is yes, Icon is the eye icon with the cross out
    b. when icon state (In 5 above) is no Icon is unchanged
  7. For the input content type password set the following conditions
    a. When icon state (In 5 above) is yes then this input is not visible
    b. When icon state (In 5 above) is no then this input is visible
  8. For the input content type text set the following conditions
    a. When icon state (In 5 above) is yes then this input visible
    b. When icon state (In 5 above) is no then this input is not visible

Test it and Viola your users can show or hide the password field

2 Likes