# Password input (goodtabs UI)

A password field with a show and hide toggle and an optional strength meter.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/password-input.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/password-input`

## Usage

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

<PasswordInput id="password" autoComplete="current-password" />
<PasswordInput showStrength autoComplete="new-password" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| showStrength | `boolean` | `false` | Show a four-bar strength meter and a Weak to Strong label under the field. |
| value, defaultValue, onChange | `input props` |  | Controlled or uncontrolled, exactly as on a plain input. |

## When to use

- Sign in, sign up and change password forms
- Any secret the person types and may want to check, such as an API key
- Set showStrength on new password fields only

## When not to use

- One-time codes: use the pin input
- As a real password policy; the score is a hint, enforce rules on the server
- For values that must never be revealed on screen

## Notes for agents

- Client component. It extends shadcn's Input, so id, autoComplete, disabled and every input prop pass through
- className goes on the wrapper, so set widths there; the field is always full width inside it
- The strength score is 0 to 4: 8 or more characters, mixed case, a number, a symbol. passwordStrength is exported if you need it elsewhere
- Pair with a Label via id and htmlFor; the meter is linked with aria-describedby and the label is a polite live region

Docs: https://ui.goodtabs.co/components/password-input