[ [UI.03] Components ] Input Password

Input Password

> A password input with visibility toggle.

Import

[ [0x5B] IMPORT ]

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

Preview

[ [0x00] INPUT PASSWORD ]

1<InputPassword placeholder="Enter password..." />

Variants

[ [0x00] DEFAULT ]

1<InputPassword placeholder="Password" />

[ [0x00] WITH LABEL ]

[PASSWORD]:

1<div className="grid gap-2">
2  <Label htmlFor="password">{formatLabel("Password")}</Label>
3  <InputPassword id="password" placeholder="Enter your password" />
4</div>

[ [0x00] WITHOUT TOGGLE ]

1<InputPassword placeholder="Hidden password" showToggle={false} />

[ [0x00] DISABLED ]

1<InputPassword disabled placeholder="Disabled" />

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
showToggle	`boolean`	`true`	Show the visibility toggle button.
disabled	`boolean`	`false`	Disable the input and toggle button.

Accessibility

[ [0x58] A11Y ]

Toggle button has aria-label for screen readers
Toggle button is excluded from tab order (tabIndex=-1)
Uses native input element for password managers