Make A Toggle Password Visibility Feature with ReactJS

This article will talk about the importance of toggle password visibility feature and how to make it using ReactJS

Form fields are an important part of our daily activities, we fill them to register as a user on websites, login, send feedback etc. As developers, it is very important to make forms as accessible as possible to everyone. One way to do this is to add a toggle password visibility option to forms.

A Website or Application that wants its users to have a good experience will have an option to toggle password visibility either using the open-eye/closed-eye icon (like the image below) or using the "show/hide" text.

Adding a password visibilty toggle feature to password form fields has several advantages, some of which are:

• Allows you to see and correct any typographical errors while typing your password
• Gives you the ability to copy/paste password
• Improves web accessibility for users with some form of disability

There are several other reasons why this feature is a must have and I'll link a well-researched article in the conclusion, for now keep reading to see how to make the toggle feature using ReactJS in just three steps (You can skip to the third step if you already have a form and all you need is functionality).

Note - I assume you have some basic knowledge of ReactJS including hooks, especially the useState Hook that we'll use. If you're new and have no idea what I'm talking about, feel free to read the docs

Create a Login Form

I’ll be using an empty App component for this tutorial, however, feel free to fit this tutorial to your needs.

Create a form inside the parent div.

return (
    <div className="App">
      <form>
      </form>
    </div>
  );

Create an input with a type of ‘email’ inside the form. You can add a heading to the form if you want

<form>
        <h1>Login</h1>
        <input
          type="email"
          className=""
          placeholder="Email"
          autoComplete="email"
          required
        />
 </form>

Create a div below input. Give the div a classname of “password-div” and nest two things inside the div- An input with type of ‘password’ and a p tag

         <div className="password-div">
           <input
             type="password"
             className=""
             placeholder="Password"
             autoComplete="password"
             required
           />
           <p>Show</p>
           </div>

You can add a button to the form

return (

    <div className="App">
      <form>
        <input
          type="email"
          className=""
          placeholder="Email"
          autoComplete="email"
          required
        />
        <div className="password-div">
          <input
            type="password"
            className=""
            placeholder="Password"
            autoComplete="password"
            required
          />
          <p></p>
        </div>
      <button>Login</button>
      </form>
    </div>
  );
}
export default App;

Style the Login form

You can style the form yourself or use the CSS snippet below

.App{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
form {
  background-color: grey;
  padding: 1rem;
  height: 25rem;
  width: 25rem;
}
input{
  width: 100%;
  height: 3rem;
  font-size: 1rem;
  margin: 5px 0;
  text-indent: .5rem;
}
button{
  width: 100%;
  height: 3rem;
  font-size: 1rem;
  background-color: white;
  border: none;
  margin-top: 3rem;
  cursor: pointer;
}
.password-div{
  position: relative;
}
p{
  position: absolute;
  top:20%;
  right: 0;
  font-size: .8rem;
  cursor: pointer;
  color: blue;
}

Adding the CSS snippet will give you the image below

Add functionality to the password toggle

You can make the toggle functional by following these steps:

Import useState into your component

import { useState } from "react";

Initialize a state called visible and set its default value to false

const [visible, setVisible] = useState(false);

Create a function called togglePassword and inside the function block- setVisible to the opposite state of visible i.e. if useState(false) set it to true and vice versa

const togglePassword = () => {
    setVisible(!visible);
  };

Make a small modification to the type prop in the password input. Replace type='password' with type={visible ? 'text' : 'password'}.

This line of code will change the type of input depending on the state of visible

Finally, add the togglePassword function to the onClick property of p and conditionally render the text content based on useState

<p onClick={togglePassword}>{visible ? 'Hide' : 'Show'}</p>

You have now added functionality to the password visibility toggle and your form field is more accessible to several people across the globe.

You can see the results of this article in the animated image below.

Conclusion

You’ve seen how important the password visibility toggle feature is in web development as well as the benefits of having it in your project.

This article has also shown how to make it yourself. If you're interested in reading more about making your form fields accessible, Nicolas Steenhout talks about it in his article

If you have any questions or suggestions feel free to drop them in the comments or reach out to me on twitter