How to Create Password Show / Hide Toggle Button in React 18

Last Updated on March 4, 2024 by Digamber in React JS

The password input field is an essential part of the form in web development. It helps in providing a secure way to enter the password by the user.

When a user creates a password, It shouldn’t be seen clearly. By keeping this in mind, we created this tutorial.

This article will explain how to create a show and hide password eye toggle button in React JS using the useState hook in the functional component with Bootstrap 5.

We will use the Bootstrap library to design the Hide / Show password toggle button in the form input control. Bootstrap is a CSS framework exclusively used to create UI components.

React Build Password Show and Hide Eye Toggle Button Tutorial

This post will teach you how to install and configure the Bootstrap package in React and create a password show/hide eye toggle button with utmost precision.

Create React Application

If you have installed Node and NPM, go ahead and use the suggested command to form a new React application.

npx create-react-app react-blog

We have downloaded the new app, now get into the app folder.

cd react-blog

Create Component File

You have to create the components/ in the src folder.

To create the password toggle show hide button, create the Form.js function component file.

import React from 'react'

function Form() {
  return (
    <div>Form page</div>
  )
}

export default Form

Add Bootstrap Package

To install the bootstrap library you have execute the suggested command using the npm.

npm install bootstrap --legacy-peer-deps

Now, open the App.js component, here you have to add the bootstrap.min.css file path.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Create Show / Hide Password Toggle Button

In this step, you have to open the components/PasswordForm.js file then put the suggested code into the file.

import React from "react";

function Form() {
  const [password, setPasswordValue] = React.useState("password");
  const [passwordInput, setPasswordInput] = React.useState("");

  const onPasswordChange = (e) => {
    setPasswordInput(e.target.value);
  };
  const toggle = () => {
    if (password === "password") {
      setPasswordValue("text");
      return;
    }
    setPasswordValue("password");
  };
  return (
    <div>
      <div className="input-group">
        <input
          type={password}
          onChange={onPasswordChange}
          value={passwordInput}
          placeholder="Enter password"
          name="password"
          className="form-control"
        />
        <button className="btn btn-primary" onClick={toggle}>
          {password === "password" ? (
            <svg
              width="20"
              height="17"
              fill="currentColor"
              className="bi bi-eye-slash-fill"
              viewBox="0 0 16 16"
            >
              <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z" />
              <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z" />
            </svg>
          ) : (
            <svg
              width="20"
              height="17"
              fill="currentColor"
              className="bi bi-eye-fill"
              viewBox="0 0 16 16"
            >
              <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
              <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
            </svg>
          )}
        </button>
      </div>
    </div>
  );
}

export default Form;

Update App Component

Lastly, get into the App.js component here we require to import the Form component as given below.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Form from "./components/Form";

function App() {
  return (
    <div>
      <Form />
    </div>
  );
}

export default App;

View App on Browser

We will now start the application server using the following command.

npm start

Check the feature app on the browser:

http://localhost:3000

Conclusion

Passwords must be created in utmost secrecy; therefore, they shouldn’t be visible during creation time.

Therefore we created this guide. In this, you have learned how to make a show or hide password eye toggle button in React JS.

Not just that, we have also shown you how to use the useState hook in a function component to create a toggle hide and show button in React.