PasswordInput

Password field with a reveal toggle at its end. The toggle keeps one name and reports the state through aria-pressed, so a screen reader hears “Show password, pressed” rather than a label that flips. Toggling never moves focus out of the field’s row and never submits a form.

Import

import { PasswordInput } from "@jcsoftdev/ui/forms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/forms/password-input.

Usage

<PasswordInput aria-label="Contraseña" defaultValue="correcto-caballo" />

Props

Prop	Type	Default	Description
revealed	boolean		Whether the password is shown as text. Controlled; omit it for an uncontrolled field.
defaultRevealed	boolean	false	Initial visibility of an uncontrolled field. Defaults to hidden.
onRevealedChange	((revealed: boolean) => void)
revealLabel	string		Accessible name of the reveal toggle; defaults to the UI string showPassword.
size	"sm" | "md" | "lg" | "xs"		sm is the 30px compact field and md (default) the 38px one: the heights of Button sm and md. xs is the same as sm; lg is the thumb-friendly field.
variant	"default" | "bare"		bare drops the border, background and side padding, for a field that sits inside chrome of its own.
start	ReactNode		Content before the text (an icon, a currency symbol, a button). Adds a wrapper that draws the field.
classNames	Partial<Record<InputPart, string>>		Per-part classes merged with cn; consumer classes win. Parts other than input only exist with start or end.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Inside Field
• Revealed
• Disabled

Source

packages/ui/src/forms/password-input/password-input.tsx