pepeloper/ uipepeloper.dev

Forms

Password Input

A password field with visibility control.

Password Input

A password field with visibility control.

Form
View component

Install

Install
npx shadcn@latest add http://localhost:3000/r/password-input.json

Dependencies: button, input

Usage

password-input-example.tsx
"use client"

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

export function Example() {
  return <PasswordInput defaultValue="source-first" className="max-w-xs" aria-label="Access key" />
}

API

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

function PasswordInput(props: PasswordInputProps)
Source code +
components/ui/password-input.tsx
"use client"

import * as React from "react"
import { EyeIcon, EyeOffIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { cn } from "cn"

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

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

  return (
    <div className="relative w-full">
      <Input
        {...props}
        type={visible ? "text" : "password"}
        className={cn("pr-10", className)}
      />
      <Button
        type="button"
        variant="ghost"
        size="icon-xs"
        className="absolute top-1/2 right-1 -translate-y-1/2"
        aria-label={visible ? "Hide password" : "Show password"}
        onClick={() => setVisible((current) => !current)}
      >
        {visible ? <EyeOffIcon /> : <EyeIcon />}
      </Button>
    </div>
  )
}

export { PasswordInput }

Registry JSON ↗

← PaginationPopover →