1

Password Input

A password input with an animated eye toggle. The eye follows your cursor and blinks periodically, creating a playful yet functional reveal control.

Dependencies

motion

Interaction Type

Hover eye button for micro-clicks; click to toggle visibility with click audio feedback. The pupil tracks your cursor.

Props

Options you can pass to customize this component.

Prop
Type
Description
label
string

Label text above the input. Defaults to "Password".

showLabel
string

Accessible label when password is hidden. Defaults to "Show password".

hideLabel
string

Accessible label when password is visible. Defaults to "Hide password".

containerClassName
string

Additional classes for the outer container.

labelClassName
string

Additional classes for the label element.

className
string

Additional classes for the input element.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/password-input.json

How to use

import { PasswordInput } from "@/components/ui/password-input"

export function Demo() {
  return <PasswordInput placeholder="Enter your password" />
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/password-input.json