How do I add a show/hide toggle to a shadcn Input?

Put the Input in an InputGroup, add an InputGroupButton in an inline-end addon, and flip type between password and text with useState. The free file at the top of this page does exactly that in about 35 lines.

Does it work with react-hook-form?

Yes. Spread register("password") onto PasswordInput. On React 19 the ref passes through shadcn's Input to the real field, so focus on error and validation work. login-form.tsx shows it with FieldError.

Why do I see two eye icons in Edge?

Edge adds its own reveal button to password fields. The [&::-ms-reveal]:hidden class in the file hides it, using the rule from Microsoft's docs.

Can I use Shy Eyes Login as the password field in my own form?

No. It ships its own form with email, password and submit. Use the free PasswordInput inside bigger forms, and Shy Eyes for a sign-in page you want people to notice.

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.

shadcn password input with a show and hide toggle

shadcn/ui has no Password component, so you build one from its Input Group: the input, a ghost button with an eye icon, and one line of state. The free file below is the whole thing, and it's all most apps need. If the field sits on a login page you want people to remember, Shy Eyes Login wires the same toggle to a mascot who covers his eyes while you type and peeks when you press show.

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

shadcn password input: the free component

components/ui/password-input.tsx

"use client";
import { useState } from "react";
import { EyeIcon, EyeOffIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group";

type PasswordInputProps = Omit<React.ComponentProps<typeof InputGroupInput>, "type">;

export function PasswordInput({ className, ...props }: PasswordInputProps) {
  const [visible, setVisible] = useState(false);

  return (
    <InputGroup>
      <InputGroupInput
        type={visible ? "text" : "password"}
        autoComplete="current-password"
        // Edge draws its own eye on password fields; hide it so there is only one
        className={cn("[&::-ms-reveal]:hidden", className)}
        {...props}
      />
      <InputGroupAddon align="inline-end">
        <InputGroupButton
          size="icon-xs"
          aria-label="Show password"
          aria-pressed={visible} // one fixed label, the state lives in aria-pressed
          // keep focus (and the caret) in the field when the eye is clicked
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => setVisible((v) => !v)}
        >
          {visible ? <EyeOffIcon aria-hidden="true" /> : <EyeIcon aria-hidden="true" />}
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  );
}

components/ui/password-input.tsx (same thing without Input Group, for older shadcn setups)

"use client";
import { useState } from "react";
import { EyeIcon, EyeOffIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

type PasswordInputProps = Omit<React.ComponentProps<typeof Input>, "type">;

export function PasswordInput({ className, ...props }: PasswordInputProps) {
  const [visible, setVisible] = useState(false);

  return (
    <div className="relative">
      <Input
        type={visible ? "text" : "password"}
        autoComplete="current-password"
        className={cn("pr-10 [&::-ms-reveal]:hidden", className)}
        {...props}
      />
      <Button
        type="button"
        variant="ghost"
        size="icon"
        className="absolute inset-y-0 right-0 h-full text-muted-foreground hover:bg-transparent"
        aria-label="Show password"
        aria-pressed={visible}
        onMouseDown={(e) => e.preventDefault()}
        onClick={() => setVisible((v) => !v)}
      >
        {visible ? <EyeOffIcon aria-hidden="true" /> : <EyeIcon aria-hidden="true" />}
      </Button>
    </div>
  );
}

shadcn password input: the free component

components/ui/password-input.tsx

"use client"; import { useState } from "react"; import { EyeIcon, EyeOffIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"; type PasswordInputProps = Omit<React.ComponentProps<typeof InputGroupInput>, "type">; export function PasswordInput({ className, ...props }: PasswordInputProps) { const [visible, setVisible] = useState(false); return ( <InputGroup> <InputGroupInput type={visible ? "text" : "password"} autoComplete="current-password" // Edge draws its own eye on password fields; hide it so there is only one className={cn("[&::-ms-reveal]:hidden", className)} {...props} /> <InputGroupAddon align="inline-end"> <InputGroupButton size="icon-xs" aria-label="Show password" aria-pressed={visible} // one fixed label, the state lives in aria-pressed // keep focus (and the caret) in the field when the eye is clicked onMouseDown={(e) => e.preventDefault()} onClick={() => setVisible((v) => !v)} > {visible ? <EyeOffIcon aria-hidden="true" /> : <EyeIcon aria-hidden="true" />} </InputGroupButton> </InputGroupAddon> </InputGroup> ); }

components/ui/password-input.tsx (same thing without Input Group, for older shadcn setups)

"use client";
import { useState } from "react";
import { EyeIcon, EyeOffIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

type PasswordInputProps = Omit<React.ComponentProps<typeof Input>, "type">;

export function PasswordInput({ className, ...props }: PasswordInputProps) {
  const [visible, setVisible] = useState(false);

  return (
    <div className="relative">
      <Input
        type={visible ? "text" : "password"}
        autoComplete="current-password"
        className={cn("pr-10 [&::-ms-reveal]:hidden", className)}
        {...props}
      />
      <Button
        type="button"
        variant="ghost"
        size="icon"
        className="absolute inset-y-0 right-0 h-full text-muted-foreground hover:bg-transparent"
        aria-label="Show password"
        aria-pressed={visible}
        onMouseDown={(e) => e.preventDefault()}
        onClick={() => setVisible((v) => !v)}
      >
        {visible ? <EyeOffIcon aria-hidden="true" /> : <EyeIcon aria-hidden="true" />}
      </Button>
    </div>
  );
}

shadcn password input with a show and hide toggle

shadcn password input: the free component

shadcn password input: the free component

Good to know

Does shadcn have a password input?

shadcn input password with icon: why Edge shows two eyes

Other free shadcn password inputs

A password field that reacts: Shy Eyes Login

Tailwind v4 and your shadcn styles

Install

Props

How qodesign compares

Questions