5Sponsor

Password Input

Password input with masked characters and reveal toggle

Terminal
password-input-demo
No opentui live preview is registered for this example yet.

Installation

pnpm dlx shadcn@latest add @termcn/password-input

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"█"