# Password input

> A password field with an eye that turns into eye-off, a four-step strength meter that fills and names itself, and a Caps Lock warning.

Show/hide toggles usually swap icons, steal focus and move the caret. Here the eye turns into eye-off without leaving the field, the strength meter fills segment by segment as the word morphs from Weak to Strong, and a Caps Lock note folds in while you type with it on.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/password-input.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: `lucide-react`
- Hairline UI components it needs (the CLI installs them too): `icon-morph`, `ui-interaction-motion`, `text-morph`
- Docs and live preview: https://hairlineui.com/ui/password-input
- Registry item (source): https://hairlineui.com/r/password-input.json

## Usage

```tsx
import { PasswordInput } from "@/components/ui/password-input";

<PasswordInput label="Password" />
<PasswordInput label="New password" strength autoComplete="new-password" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `strength` | `boolean \| (value) => 0–4` | `false` | Show the meter; pass a function to score it yourself. |
| `strengthLabels` | `[string, string, string, string]` | `["Weak","Fair","Good","Strong"]` | Words for scores 1 to 4. |
| `...Input props` | `InputProps` | – | label, hint, error, size, onValueChange and every native prop. |

## States

- **hidden**: Dots, with the eye at the end.
- **shown**: The eye turns into eye-off (rotate morph, 480ms); focus stays in the field.
- **strength**: Segments fill (420ms each, 50ms apart) and turn red, amber or green; the word morphs.
- **caps lock**: "Caps Lock is on" folds in where the hint goes.

## What it handles

Most peek buttons take focus from the field, so the keyboard closes on phones and the caret jumps. This one never takes focus.

- **Peek without losing your place**: The toggle never takes focus, so the caret and the phone keyboard stay.
- **A meter that fills**: Four segments fill left to right with a 50ms stagger; the word morphs through TextMorph.
- **Bring your own scoring**: Pass a function (zxcvbn, your API) instead of the built-in length-and-variety score.
- **Caps Lock note**: Read from the key events; it folds in under the field and away on blur.

## Replaces

show/hide toggle, strength meter, Caps Lock detection

## Where it fits

- **Sign-in forms**: Show the password without losing the caret.
- **Sign-up and reset**: A meter that tells people how strong the new password is.
- **Account settings**: Change-password fields with a Caps Lock warning.
- **API secrets**: Masked tokens you can peek at.

## Notes

- Shares field.tsx with every text control: one surface, one focus ring, one way of showing hints and errors.
- The meter is announced politely as it changes; the eye is a toggle button with aria-pressed.
- scorePassword is exported if you want the same score elsewhere.

License: MIT (https://hairlineui.com/license#components)