309

Password Input

PreviousNext

Password Input provides a way for the user to securely enter a password, with the ability to toggle the visibility of the password.

Docs
"use client";

import {

Installation

pnpm dlx shadcn@latest add junwen-k/ui-x/password-input

Usage

import {
  PasswordInput,
  PasswordInputAdornmentToggle,
  PasswordInputInput,
} from "@/components/ui/password-input";
<PasswordInput>
  <PasswordInputInput placeholder="Password" />
  <PasswordInputAdornmentToggle />
</PasswordInput>

Examples

Default

"use client";

import {

Checkbox

"use client";

import * as React from "react";

Form

Create your account
Choose a strong password to secure your account.

Must be at least 12 characters long.

Please confirm your password.

import { LockKeyhole } from "lucide-react";

import { Button } from "@/components/ui/button";

Accessibility

The visibility toggle is icon-only — give it an accessible name, e.g. <PasswordInputAdornmentToggle aria-label="Show password" />. The eye icons are decorative and hidden from assistive technology. The input renders as type="password" until toggled, so browser and password-manager behavior is unaffected by the extra parts.

API Reference

Styled wrappers around the Password Input primitive — see the primitive page for the full prop tables. Custom adornments, such as a leading lock icon, are composed with shadcn/ui's Input Group parts (InputGroupAddon, InputGroupButton) rather than Password Input-specific parts.

PasswordInput

Wraps Root (visible, defaultVisible, onVisibleChange), rendered as an Input Group; remaining props go to the group element.

PasswordInputInput

Wraps Input with input-group styling. Accepts standard <input> props such as placeholder and autoComplete.

PasswordInputAdornmentToggle

Wraps Toggle as an icon button in the trailing addon, swapping the eye icon based on the visibility state.