components / form
Password Input
Password field with a show/hide toggle.
1.7 kB gzip client component
Use the eye to check what you typed.
password-input-default.tsx
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { PasswordInput } from "@/components/ui/password-input";
export default function PasswordInputDefault() {
return (
<Field className="w-full max-w-sm" name="password">
<FieldLabel>Password</FieldLabel>
<PasswordInput autoComplete="new-password" placeholder="At least 8 characters" />
<FieldDescription>Use the eye to check what you typed.</FieldDescription>
</Field>
);
}Installation
$ npx shadcn@latest add https://cd-ui.vercel.app/r/password-input.jsonfirst time? set up components.json and the theme first: see installation.
Usage
import { PasswordInput } from "@/components/ui/password-input"
<PasswordInput autoComplete="current-password" />API
PasswordInput
Base UI · InputInput with an eye button that toggles between hiding and showing the text. Inside a Field, it keeps its label and error.
| prop | type | default |
|---|---|---|
showLabelAccessible name of the button while the text is hidden. | string | "Show password" |
hideLabelAccessible name of the button while the text is visible. | string | "Hide password" |
...propsEverything from | Input props | - |
Accessibility
- The button is a real
<button>witharia-pressedand a label that names the next action. TranslateshowLabelandhideLabelin other languages.