1Sponsor

Password Input

Password input with masked characters and reveal toggle

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/password-input.json

Usage

import { PasswordInput } from "@/components/ui/password-input";
<PasswordInput
  label="Password"
  placeholder="Enter password"
  showToggle
  onSubmit={(value) => console.log("Password:", value)}
/>

API Reference

PasswordInput

PropTypeDefault
valuestringundefined
onChange(value: string) => voidundefined
onSubmit(value: string) => voidundefined
placeholderstring""
maskstring"●"
showTogglebooleanfalse
labelstringundefined
idstringundefined
borderStyle"single" | "double" | "round" | "bold" | "singleDouble" | "doubleSingle" | "classic""round"
paddingXnumber1
widthnumberundefined
cursorstring"█"