How to Create Toggle Password Visibility with Material UI

Have you ever entered your password in a password input field and forget what you just typed? And then you wanted to see it but wait! There was no option available to view your password.

To solve this problem, it is good to have a visibility icon in the password field which when once clicked, will allow the user to view their password and vice-versa.

Annoying, right?

This is how I created the same in Libertas, my Next.js full stack application with Material UI.

Table of Contents

• 1. Create a component called PasswordInput
  • Create a TextField of type “password”
• 2. Add toggle visibility functionality
• 3. Add the toggle visibility icon on the TextField
• 4. Display the PasswordInput component on the page
• 5. Add “text” to the type attribute based on condition
• Final code for toggle password visibility

1. Create a component called PasswordInput

For reusing the same component in other pages, I created a separate component which will only have a TextField component of type “password”. You can name it whatever you want.

const PasswordInput = () => {

  return (
  );

};

export default PasswordInput;

This component has its own state which I used for the toggle visibility function.

Create a TextField of type “password”

I have used Material UI as the CSS library in Libertas, so I simply imported a TextField component (equivalent to input element of HTML) and pasted it into the PasswordInput component.

I installed Material UI with this command:

yarn add @mui/material @emotion/react @emotion/styled

If you have Material UI installed in your project, you can follow the same code given below.

import { TextField } from "@mui/material";

const PasswordInput = ({ password, handlePassword }) => {

  return (
    <TextField
      size="small"
      type="password"
      label="Password"
      value={password}
      onChange={handlePassword}
      required={true}
      fullWidth
    />
  );
};

export default PasswordInput;

Notice how the value and onChange attribute values are coming through props.

2. Add toggle visibility functionality

I wanted to show the password when I click on the visibility icon (the eye icon) and when I click it again, password should get hidden.

To achieve this I added a state variable called showPassword which will take a Boolean value (true/false). I created it using useState hook.

  const [showPassword, setShowPassword] = useState(false);

Initially, the value of showPassword should be false, meaning the password will remain hidden at the start.

When the user clicks on the eye icon, showPassword will change to true and password will be visible to the user.

So, I added a function responsible for clicking on the icon.

const handleClickShowPassword = () => {
    setShowPassword(!showPassword);
};

The above function toggles the value of showPassword state variable.

But wait, something’s still missing right now.

Where’s the eye icon that I have been mentioning?

3. Add the toggle visibility icon on the TextField

To add the icons, I installed Material UI Icons package.

I used the following command to install it.

yarn add @mui/icons-material

I took a couple of icons from the Material icons page:

• VisibilityOff
• Visibility.

InputProps={{
  endAdornment: (
    <InputAdornment position="end">
      <IconButton
        aria-label="toggle password visibility"
        onClick={handleClickShowPassword}
        edge="end"
      >
        {showPassword ? <VisibilityOff /> : <Visibility />}
      </IconButton>
    </InputAdornment>
  ),
}}

If we want to add an icon inside the TextField component in Material UI, we have to use something called InputAdornment. It is one of the ways to add an icon to the TextField.

I added both the icons using a conditional operator to toggle the visibility based on the showPassword state.

Now, the PasswordInput component looks like this:

import { Visibility, VisibilityOff } from "@mui/icons-material";
import { IconButton, InputAdornment, TextField } from "@mui/material";
import { useState } from "react";

const PasswordInput = ({ password, handlePassword }) => {
  const [showPassword, setShowPassword] = useState(false);

  const handleClickShowPassword = () => {
    setShowPassword(!showPassword);
  };

  return (
    <TextField
      size="small"
      type="password"
      label="Password"
      value={password}
      onChange={handlePassword}
      required={true}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={handleClickShowPassword}
              edge="end"
            >
              {showPassword ? <VisibilityOff /> : <Visibility />}
            </IconButton>
          </InputAdornment>
        ),
      }}
      fullWidth
    />
  );
};

4. Display the PasswordInput component on the page

Now, we can use the component in any page by importing it and passing the props to it.

"use client";
import PasswordInput from "@/components/formComponents/PasswordInput";

const DisplayPasswordInput = () => {
  const [password, setPassword] = useState("");

  return (
    <div
      style={{ display: "flex", justifyContent: "center", padding: "4rem 0" }}
    >
      <PasswordInput
        password={password}
        handlePassword={(e) => setPassword(e.target.value)}
      />
    </div>
  );
};

export default DisplayPasswordInput;

This is what we see on the page:

We are still not done though.

If you look carefully at the code, we wouldn’t we able to see what we have typed on the password field.

Why?

Because in the type attribute, we have specified the value as “password”. No matter how many times we click on the visibility icon, Material UI will only show the dots in the password field.

5. Add “text” to the type attribute based on condition

To actually see what we type, we have to set the type attribute’s value to “text” when showPassword is true.

type={showPassword ? "text" : "password"}

Final code for toggle password visibility

import { Visibility, VisibilityOff } from "@mui/icons-material";
import { IconButton, InputAdornment, TextField } from "@mui/material";
import { useState } from "react";

const PasswordInput = ({ password, handlePassword }) => {
  const [showPassword, setShowPassword] = useState(false);

  const handleClickShowPassword = () => {
    setShowPassword(!showPassword);
  };

  return (
    <TextField
      size="small"
      type={showPassword ? "text" : "password"}
      label="Password"
      value={password}
      onChange={handlePassword}
      required={true}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={handleClickShowPassword}
              edge="end"
            >
              {showPassword ? <VisibilityOff /> : <Visibility />}
            </IconButton>
          </InputAdornment>
        ),
      }}
      fullWidth
    />
  );
};

export default PasswordInput;

This is how I created the toggle password visibility functionality in Libertas.

You can import that component in your login page, sign up page or any other page!

---

Read more: How to Actually Upgrade Expo and React Native Versions to Latest?