React Show/Hide Password Input Field with Tailwind CSS

This tutorial will guide you through creating a show/hide password input field in React.js using Tailwind CSS. We'll explore examples of toggling password visibility with an eye icon, as well as hiding and showing passwords using checkboxes, all styled with Tailwind CSS.

Tools Used:

• React JS
• Tailwind CSS v.3
• Heroicons Icon

Explanation of the Code:

import { useState } from "react";

export default function PasswordInput() {
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);

  function togglePasswordVisibility() {
    setIsPasswordVisible((prevState) => !prevState);
  }

  return (
    <div className="relative w-1/4 container mx-auto mt-20">
      <input
        type={isPasswordVisible ? "text" : "password"}
        placeholder="Password"
        className="w-full px-4 py-2 text-base border border-gray-300 rounded outline-none focus:ring-blue-500 focus:border-blue-500 focus:ring-1"
      />
      <button
        className="absolute inset-y-0 right-0 flex items-center px-4 text-gray-600"
        onClick={togglePasswordVisibility}
      >
        {isPasswordVisible ? (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="w-5 h-5"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
            />
          </svg>
        ) : (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="w-5 h-5"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
            />
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
            />
          </svg>
        )}
      </button>
    </div>
  );
}

Explanation:

This code snippet is a React component called PasswordInput that provides a password input field with a toggle button to show or hide the entered password. Let's break down the code:

1. useState Hook:

   • import { useState } from "react";: This line imports the useState hook from the React library. The useState hook is a function that allows functional components to manage state.
   • const [isPasswordVisible, setIsPasswordVisible] = useState(false);: This line initializes a state variable isPasswordVisible and a function setIsPasswordVisible to update its value. The initial state of isPasswordVisible is false, indicating that the password is initially hidden.

2. togglePasswordVisibility Function:

   • function togglePasswordVisibility() { ... }: This function toggles the visibility of the password by updating the state variable isPasswordVisible using the setIsPasswordVisible function.

3. Return Statement (JSX):

   • The return statement contains the JSX code that defines the component's UI.
   • It consists of a div element with a class name for styling purposes and contains an input element for entering the password.
   • The type attribute of the input element is dynamically set based on the value of isPasswordVisible, toggling between "password" (hidden) and "text" (visible).
   • There's also a button element that toggles the visibility of the password when clicked. The button contains an SVG icon representing an eye, which changes its appearance based on the visibility state of the password.

4. SVG Icons:

   • The SVG icons are used inside the button element to visually represent the action of toggling the password visibility. One icon represents a visible eye, indicating that the password is currently visible, while the other icon represents a hidden eye, indicating that the password is currently hidden.

Overall, this component provides a password input field with a toggle button to switch between showing and hiding the entered password, enhancing user experience and security.

Conclusion:

This code demonstrates how to create a show/hide password input field in React.js using Tailwind CSS. The password visibility is toggled using a button with an eye icon, enhancing user experience and security.

• Author: Ahmed Bouchefra Follow @ahmedbouchefra

• Date: 29 Jan 2024