How do I show the password on click in React?

Keep a boolean in useState and set the input's type to text when it's true and password when it's false. A button flips the boolean. That's all the component above does, plus labels and the Edge fix.

Can I make the eye icon without an icon library?

Yes. The component draws it with inline SVG: an eye outline, a circle for the pupil, and a slash line that renders only while the password is visible.

Why are there two eye icons in Edge?

Edge has its own password reveal button. Hide it with ::-ms-reveal { display: none; }, which the [&::-ms-reveal]:hidden class does in Tailwind.

Preline, FlyonUI or this component?

Preline and FlyonUI are free HTML plus a JavaScript plugin, fine if the plugin is already on the page. In React, the useState version needs nothing extra.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.

Show password toggle in Tailwind and React

A show/hide password button in React and Tailwind is one state flag, a button and an eye icon. The free component below needs no UI kit and no icon package, and for most searches it's the whole answer. Shy Eyes Login is the same toggle on a full login form, with a mascot who covers his eyes and peeks when the password is shown.

One payment$3

By buying you agree to the Terms.

Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Show hide password in Tailwind: the free React component

components/password-field.tsx

"use client";
import { useId, useState } from "react";

export function PasswordField({ label = "Password", ...props }: { label?: string } & Omit<React.ComponentProps<"input">, "type" | "id">) {
  const id = useId();
  const [visible, setVisible] = useState(false);

  return (
    <div className="w-full max-w-sm">
      <label htmlFor={id} className="mb-1.5 block text-sm font-medium text-gray-700">
        {label}
      </label>
      <div className="relative">
        <input
          id={id}
          type={visible ? "text" : "password"}
          autoComplete="current-password"
          className="block w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-3.5 pr-11 text-sm text-gray-900 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 [&::-ms-reveal]:hidden"
          {...props}
        />
        <button
          type="button"
          aria-label="Show password"
          aria-pressed={visible} // the label stays the same; pressed = visible
          onMouseDown={(e) => e.preventDefault()} // the caret stays in the field
          onClick={() => setVisible((v) => !v)}
          className="absolute inset-y-0 right-0 grid w-11 place-items-center rounded-r-lg text-gray-500 hover:text-gray-700 focus-visible:outline-2 focus-visible:outline-indigo-500"
        >
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" />
            <circle cx="12" cy="12" r="3" />
            {/* the slash appears while the password is visible: click again to hide */}
            {visible && <path d="M3 3l18 18" />}
          </svg>
        </button>
      </div>
    </div>
  );
}

Show hide password in Tailwind: the free React component

components/password-field.tsx

"use client"; import { useId, useState } from "react"; export function PasswordField({ label = "Password", ...props }: { label?: string } & Omit<React.ComponentProps<"input">, "type" | "id">) { const id = useId(); const [visible, setVisible] = useState(false); return ( <div className="w-full max-w-sm"> <label htmlFor={id} className="mb-1.5 block text-sm font-medium text-gray-700"> {label} </label> <div className="relative"> <input id={id} type={visible ? "text" : "password"} autoComplete="current-password" className="block w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-3.5 pr-11 text-sm text-gray-900 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 [&::-ms-reveal]:hidden" {...props} /> <button type="button" aria-label="Show password" aria-pressed={visible} // the label stays the same; pressed = visible onMouseDown={(e) => e.preventDefault()} // the caret stays in the field onClick={() => setVisible((v) => !v)} className="absolute inset-y-0 right-0 grid w-11 place-items-center rounded-r-lg text-gray-500 hover:text-gray-700 focus-visible:outline-2 focus-visible:outline-indigo-500" > <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" /> <circle cx="12" cy="12" r="3" /> {/* the slash appears while the password is visible: click again to hide */} {visible && <path d="M3 3l18 18" />} </svg> </button> </div> </div> ); }

Show password toggle in Tailwind and React

Show hide password in Tailwind: the free React component

Show hide password in Tailwind: the free React component

Good to know

Tailwind show password with Preline or FlyonUI

Cruip's toggle password tutorial for Next.js

Password eye icon in React: Edge adds a second one

The same toggle on a login form: Shy Eyes Login

Install

Props

How qodesign compares

Questions