# PasswordInput

Password field with a button that shows or hides the characters.

```tsx
import { PasswordInput } from "@/components/ui/password-input"
import { Field, FieldControl, FieldLabel } from "@/components/ui/field"

<Field required>
  <FieldLabel>Password</FieldLabel>
  <FieldControl>
    <PasswordInput />
  </FieldControl>
</Field>
```

## Usage

### What you provide
- The same props as `Input` (no `type`). Use it inside `Field` for the label, rules and errors.
- `autoComplete`: `"current-password"` (default) to sign in, `"new-password"` when creating one.
- `showLabel` / `hideLabel` to translate the button text ("Show password" / "Hide password").

### Usage
- Never block paste or password managers. State the password rules before typing.

## Accessibility

- The password starts hidden and the button says the next action: "Show password", then "Hide password". The icon follows the text and is hidden from screen readers.
- The button is `type="button"`: it never submits the form, keeps focus after activation and keeps the value. It has no `aria-pressed`, because its name already changes.
- Showing the password doesn't announce it in any extra message.

_Adapted from Magoo 1.6.0 by Marcelo Sales: [Input "password"](https://magoo.cc/en/components/forms/input-password.html) (`input-password`). Magoo is educational guidance; test the behavior in your implementation._

## API

Install:

```bash
npx @aline-aroucha/pui add password-input
```

```tsx
<PasswordInput>
  <Input />
  <Button />
</PasswordInput>
```

### PasswordInput

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `autoComplete` | `"current-password" \| "new-password"` | `"current-password"` | Signing in or creating a password. |
| `showLabel` | `string` | `"Show password"` | Button text while the password is hidden. |
| `hideLabel` | `string` | `"Hide password"` | Button text while the password is visible. |
| `…input props` | `InputHTMLAttributes` | — | Every Input prop except `type`. |

## Related pages

- [Field](https://aline-aroucha.github.io/pui/components/field.html)
- [Input](https://aline-aroucha.github.io/pui/components/input.html)

---
PUI documentation · https://aline-aroucha.github.io/pui/components/password-input.html