How to make a show or hide password toggle button in Reactjs?
Tags: react
Published: 2021-02-18 00:00:00

---
  title: How to make a show or hide password toggle button in Reactjs?
  published: true
  tags: Reactjs
  date: Thu Feb 18 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/show-or-hide-password-ability-reactjs
  cover_image: https://melvingeorge.me/_next/static/images/main-b252aac833d5c21db93ae7e02be6f524.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/show-or-hide-password-ability-reactjs)
  
To show or hide the password in the input field in Reactjs, the basic idea is to change the input tag's type attribute to `text` from `password` and vice versa on clicking the "Show password" button or an appropriate button of your own.

### Step 1

First, let's make an `input` tag with `password` as the type of the input field.

```jsx
// Input Password Component
export default function Password() {
  return (
    <div>
      <input type="password" />
    </div>
  );
}
```

### Step 2

Initialize a boolean state called `passwordShown` to determine if the password in the input field should be shown using the `useState()` react hook.

Let's give the initial boolean state value as `false` as we do not want the input field to be shown when the user tries to enter the password at first. We only need them to be visible as the user clicks on the `Show Password` button.

It can be done like this,

```jsx
// Import useState hook from react
import { useState } from "react";

// Input Password Component
export default function Password() {
  // Initialize a boolean state
  const [passwordShown, setPasswordShown] = useState(false);

  return (
    <div>
      <input type="password" />
    </div>
  );
}
```

### Step 3

Now instead of hardcoding the `password` as the type of the input tag, we need to make it dynamic so that if the `passwordShown` boolean state is `true` it should show the password and if it is `false` it should not show the password.

It can be done like this,

```jsx
// Import useState hook from react
import { useState } from "react";

// Input Password Component
export default function Password() {
  // Initialize a boolean state
  const [passwordShown, setPasswordShown] = useState(false);

  return (
    <div>
      <input type={passwordShown ? "text" : "password"} />
    </div>
  );
}
```

As you can see that in the `type` attribute we are first checking if the `passwordShown` boolean state is `true` or `false` and applying the attribute value according to it.

### Step 4

Now let's make a `Show Password` button and attach an `onClick` handler to it so that when the user clicks the button it should show the password.

```jsx
// Import useState hook from react
import { useState } from "react";

// Input Password Component
export default function Password() {
  // Initialize a boolean state
  const [passwordShown, setPasswordShown] = useState(false);

  // Password toggle handler
  const togglePassword = () => {
    // When the handler is invoked
    // inverse the boolean state of passwordShown
    setPasswordShown(!passwordShown);
  };

  return (
    <div>
      <input type={passwordShown ? "text" : "password"} />
      <button onClick={togglePassword}>Show Password</button>
    </div>
  );
}
```

Here we have made a handler called `togglePassword` so that when it is invoked it will just inverse the boolean state of `passwordShown`.

That's all! 😃. We have made a working Show/Hide password toggle.

See the above code in action in [Codesandbox](https://codesandbox.io/s/show-password-toggle-ue9wo?file=/src/App.js).

### Feel free to share if you found this useful 😃.

---