Password Field

Forms

About

A labeled password input with an animated reveal toggle that morphs an eye icon with a drawn slash and smoothly animates helper or error text in and out.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Password Field to your project and fits it to your theme.

Code

How Password Field is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import PasswordField from "@/components/ui/password-field";

export default function PasswordFieldDemo() {
  return (
    <div className="flex w-full max-w-sm items-center justify-center p-10">
      <PasswordField
        label="Password"
        description="Must be at least 8 characters."
        placeholder="Enter your password"
      />
    </div>
  );
}