Make A Toggle Password Visibility Feature with ReactJS
Tags: webdev, frontend, ux, a11y
Published: 2023-03-17 15:00:00


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.


![A screenshot of a login form field with a toggle password visibility feature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjrxgfq2txvahs6jr0xe.png)

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](https://react.dev/reference/react/useState#usestate)

## 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

![A screenshot of a form with two fields which are: Email and Password](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eu59ts5rkwo7aujp41hp.png)

## 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.

![An animated image of a form with two fields which are: Email and Password, the password visibility is being toggled by a show/hide feature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9bv4itzw6hh76rixwmi.gif)

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](https://incl.ca/show-hide-password-accessibility-and-password-hints-tutorial/)

If you have any questions or suggestions feel free to drop them in the comments or [reach out to me on twitter](https://twitter.com/human_eiffel)