Password Input

A Text Input with a lock icon and a show / hide toggle for typing secrets. The helper text states the password rule before the user types.

npx sdaia-ui@latest add password-input

Usage

import { PasswordInput } from "@/components/ui/PasswordInput"

<PasswordInput label="Password" helperText="Use at least 8 characters." />

Empty field with the placeholder and the password rule as helper text.

Loading demo: password-input-default

Visibility=Shown: the eye toggle reveals the value; it is controlled here with visibility and onVisibilityChange.

Loading demo: password-input-shown

The value breaks the rule; the message says how to fix it. Type more characters to clear it.

Loading demo: password-input-error

The field and its toggle cannot be used.

Loading demo: password-input-disabled

Arabic layout: the lock icon moves to the start (right) and the toggle to the end (left).

Loading demo: password-input-rtl

A sign-in form with "Forgot password?" under the field, aligned to the end.

Loading demo: password-input-sign-in

Prop	Type	Default	Required
label	string	—	optional
placeholder	string	—	optional
helperText	string	—	optional
error	string	—	optional
visibility	"hidden" \| "shown"	—	optional
defaultVisibility	"hidden" \| "shown"	"hidden"	optional
onVisibilityChange	(visibility) => void	—	optional
autoComplete	string	"current-password"	optional
labels	Partial<PasswordInputLabels>	—	optional
disabled	boolean	false	optional
required	boolean	false	optional
size	"medium" \| "large"	responsive	optional
dir	"ltr" \| "rtl"	—	optional
value / onChange / …	InputHTMLAttributes	—	optional

A visible <label for> names the field; helper and error text are linked with aria-describedby, and an error sets aria-invalid and is announced (role="alert").
The eye toggle is a separate <button aria-pressed> named "Show password" (localise with labels.toggle) with a 24 × 24 px target. It is never nested inside another control.
Paste is never blocked. A revealed password turns off spell-check, autocorrect and autocapitalise.
Set autoComplete to "current-password" (sign-in) or "new-password" (create / change) so password managers work.
Focus shows the 2px Border/border-brand field border; the toggle has its own focus ring.

The field is fluid: it fills its container (fullWidth) and never forces a minimum width.
Unset size follows Text Input: medium below 768px, large from 768px (the Figma field is Large).
Spacing and type use the responsive design tokens; there are no per-component breakpoints.