Password Input

Overview

The Password Input component is an enhanced input field for password entry with a visibility toggle button, allowing users to show or hide the password text.

Installation

npx shadcn@latest add https://foodease-dev-registry.cap.reachcinema.io/r/v1/password-input.json

This will install:

Password Input component
Input component (dependency)
Lucide React icons

Usage

Basic Usage

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

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

Controlled Component

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

export default function LoginForm() {
  const [password, setPassword] = useState("")

  return (
    <PasswordInput
      value={password}
      onChange={(e) => setPassword(e.target.value)}
      placeholder="Enter password"
    />
  )
}

External Visibility Control

Control the visibility state from outside the component:

import { useState } from "react"
import { PasswordInput } from "@/components/ui/password-input"
import { Button } from "@/components/ui/button"

export default function LoginForm() {
  const [showPassword, setShowPassword] = useState(false)

  return (
    <div>
      <PasswordInput
        showPassword={showPassword}
        toggleVisibility={() => setShowPassword(!showPassword)}
        placeholder="Enter password"
      />
      <Button onClick={() => setShowPassword(!showPassword)}>
        {showPassword ? "Hide" : "Show"} Password
      </Button>
    </div>
  )
}

API Reference

PasswordInput

Extends all HTML input attributes except type.

Prop	Type	Description
`showPassword`	`boolean`	External control for visibility state
`toggleVisibility`	`() => void`	External toggle handler
`className`	`string`	Additional CSS classes
...props	`InputHTMLAttributes`	All standard input props

Styling

The component includes a toggle button positioned absolutely on the right side of the input. Customize appearance using className:

<PasswordInput
  className="border-red-500"
  placeholder="Password"
/>

Features

Toggle Visibility: Click the eye icon to show/hide password
Automatic State: Internal state management by default
External Control: Optional controlled mode
Accessible: Proper button type and ARIA attributes
Icon Toggle: Eye open/closed icons from Lucide React

Examples

Password Confirmation

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

export default function SignupForm() {
  const [password, setPassword] = useState("")
  const [confirm, setConfirm] = useState("")

  const match = password === confirm && password.length > 0

  return (
    <div className="space-y-4">
      <div>
        <label>Password</label>
        <PasswordInput
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Enter password"
        />
      </div>
      
      <div>
        <label>Confirm Password</label>
        <PasswordInput
          value={confirm}
          onChange={(e) => setConfirm(e.target.value)}
          placeholder="Confirm password"
          className={!match && confirm ? "border-red-500" : ""}
        />
      </div>
      
      {!match && confirm && (
        <p className="text-sm text-red-500">Passwords do not match</p>
      )}
    </div>
  )
}

Dependencies

lucide-react - Eye icons
input - Base input component from shadcn
@/lib/utils - cn utility function

Password Input

On this page