# PasswordInput

> Password field with a reveal toggle at its end.

Source: https://ui.jcsoftdev.com/docs/components/password-input

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/forms-passwordinput--default)
- [Inside Field](/storybook/?path=/story/forms-passwordinput--inside-field)
- [Revealed](/storybook/?path=/story/forms-passwordinput--revealed)
- [Disabled](/storybook/?path=/story/forms-passwordinput--disabled)

## Source

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