# PasswordInput

A password field with a button that shows and hides what was typed.

```ehtml Example
import { PasswordInput } from "@elements/ui/password-input";

<PasswordInput value={form.password} attrs={{ "aria-label": "Password" }} />
<PasswordInput value={form.next} autocomplete="new-password" visible={ui.reveal} />
<PasswordInput value={form.apiKey} ignorePasswordManagers />
```

## Parts

| Part | What it is |
|---|---|
| `.password-input` | The root. |
| `.password-input-input` | The native input, in the Input chrome. |
| `.password-input-toggle` | The show and hide button. |
| `.password-input-indicator` | The icon inside the toggle. |

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `value` | `string` (two-way) | `""` | The password. |
| `visible` | `boolean` (two-way) | `false` | Shows the password as text. |
| `autocomplete` | `"current-password" \| "new-password" \| "off"` | `"current-password"` | Tells password managers whether to fill or to suggest a new password. |
| `ignorePasswordManagers` | `boolean` | `false` | Asks 1Password, LastPass, Bitwarden, Dashlane and Proton Pass to leave the field alone (API keys, PINs). |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Height and type size from the control tokens. |
| `placeholder` | `string` | `""` | Shown while empty. |
| `name` | `string` | `""` | Submits the value with its form. |
| `disabled` | `boolean` | `false` | Not interactive. |
| `readonly` | `boolean` | `false` | Not editable; the toggle still reveals it. |
| `required` | `boolean` | `false` | The form will not submit while empty. |
| `invalid` | `boolean` | `false` | Marks the input invalid. |
| `showLabel` | `string` | `"Show password"` | The toggle's name while hidden. |
| `hideLabel` | `string` | `"Hide password"` | The toggle's name while visible. |
| `class` | `string` | `""` | Extra classes on the root. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Attributes for the input: id, aria-label, minlength, pattern, data-\*. |
| `oninput` | `(e: InputEvent) => void` | `() => {}` | The input's input event. |
| `onchange` | `(e: Event) => void` | `() => {}` | The input's change event. |
| `onVisibilityChange` | `(details: { visible: boolean }) => void` | `() => {}` | When the toggle shows or hides the password. |

## Slots

| Slot | Content |
|---|---|
| `visibleIcon` | The toggle's icon while the password is visible. Default: eye. |
| `hiddenIcon` | The toggle's icon while it is hidden. Default: eye-off. |

## Keyboard

| Keys | Action |
|---|---|
| `Tab` | Moves from the input to the toggle. |
| `Enter / Space` | On the toggle: shows or hides the password and returns focus to the input. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-state` | `"visible" \| "hidden"` | root, input, toggle, indicator |
| `data-disabled` | present when disabled | root, input, toggle, indicator |
| `data-invalid` | present when invalid | root, input, indicator |
| `data-readonly` | present when read-only | root, input, toggle, indicator |

## Accessibility

- The toggle is named Show password or Hide password, points at the input with aria-controls, and sets aria-expanded while the password shows.
- The toggle stays in the tab order so a keyboard user can reveal the password; a click keeps focus and the caret in the input.
- It is a native password input, so password managers, autofill and form validation work.

## See also

- [Slider](slider): Pick a value or a range by dragging thumbs along a track, with full keyboard support.
- [NumberInput](number-input): A number field with stepper buttons, keyboard steps, formatting, wheel and scrub.
- [InputOTP](input-otp): A one-time code in separate slots, with paste, SMS autofill and a pattern.
- [TagsInput](tags-input): Type a list of tags into one field: add, edit, delete and paste them from the keyboard.
- [ColorPicker](color-picker): Pick a color with an area, channel sliders, inputs, swatches and the eye dropper.
- [FileUpload](file-upload): Drop, paste or browse for files; see them listed with previews, sizes, errors and progress.