paneui
Forms

Password Input

Password field with a button to show or hide it.

@paneui/theme@paneui/icons@paneui/input@paneui/control-size@paneui/locale-providermotion

At least 8 characters.

Installation

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

Usage

Examples

Sizes

Accessibility

The reveal button is labelled "Show password" / "Hide password" and reports aria-pressed. Inside a Field the input is wired like any other control.

API Reference

PasswordInput

Also accepts every prop of Input.

size= "default"
"xs" | "sm" | "default" | "lg"
Same heights as Input; the reveal button shrinks with it.
revealed
boolean
Controlled visibility.
defaultRevealed= false
boolean
Initial visibility.
onRevealedChange
(revealed: boolean) => void
Called when the eye button toggles.
PropTypeDefaultDescription
size"xs" | "sm" | "default" | "lg""default"Same heights as Input; the reveal button shrinks with it.
revealedboolean—Controlled visibility.
defaultRevealedbooleanfalseInitial visibility.
onRevealedChange(revealed: boolean) => void—Called when the eye button toggles.