Password Input

A single-field password input built on Input Group, with a show/hide toggle. Passwords are opaque strings, not RTL-meaningful text, so the field forces dir="ltr" and keeps the toggle button on the same physical side, regardless of the surrounding document direction.

Last updated August 16, 2026

Overview

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/password-input.json

Usage

import { PasswordInput } from "@/components/ui/password-input"
 
export function Example() {
  return <PasswordInput autoComplete="current-password" />
}

RTL

The label and description follow the surrounding RTL layout, while the password field and its toggle button stay LTR and keep the eye icon on the same physical side.

API Reference

PasswordInput

Prop	Type	Default	Description
autoComplete	string	—	Standard input autocomplete hint, e.g. "current-password" or "new-password".
className	string	—	Applied to the underlying InputGroup.
…props	React.ComponentProps<typeof InputGroupInput>	—	All other props (value, defaultValue, onChange, placeholder, disabled, etc.) are forwarded to the input. type and dir are fixed and cannot be overridden.

Edit this page on GitHub

PreviousPagination NextPopover