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 January 1, 1980

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/password-input

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 NextPlate Input