# Password field

> Capture sensitive text with a visible reveal control.

- Type: Component (inputs)
- Access: Free, open source
- Page: https://ui.xzero.co.uk/components/password-field
- Markdown: https://ui.xzero.co.uk/components/password-field/markdown
- Registry item: https://mcp.xzero.co.uk/r/password-field.json
- Source file: `registry/components/password-field/password-field.tsx`
- Dependencies: motion
- Keywords: field, security, react password input, show hide password, password toggle, password field with eye icon, login password field

## When to use

- Sign in forms and password confirmation fields.
- Any secret the person may want to check by revealing it.

## When not to use

- Use password-strength when creating or changing a password.
- Use input for non-secret values.

## Installation

Register both Xzero UI namespaces in your project's components.json:

```json
{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}
```

```bash
npx shadcn@4.23.0 add @xzero-ui/password-field
```

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

## Usage

```tsx
import { PasswordField } from "@/components/xzero/password-field/password-field";

export function SignInPassword() {
  return (
    <PasswordField
      label="Password"
      name="password"
      autoComplete="current-password"
      required
    />
  );
}
```

## Examples

### Translated

```tsx
<PasswordField label="Passwort" messages={{ showPassword: "Passwort anzeigen", hidePassword: "Passwort verbergen" }} />
```

## API reference

### PasswordField

A password input with a show and hide toggle whose eye icon is slashed by a drawn line.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` (required) | `string` | – | Visible label tied to the input. |
| `description` | `string` | – | Helper copy under the field, linked through aria-describedby. |
| `messages` | `Partial<{ showPassword: string; hidePassword: string }>` | `{ showPassword: "Show password", hidePassword: "Hide password" }` | Names of the reveal toggle, for translation. Pass only the strings you change. |
| `...props` | `Omit<InputHTMLAttributes<HTMLInputElement>, "type">` | – | Forwarded to the input, including ref, value, onChange, name, and autoComplete. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | On the toggle button, shows or hides the password. |

## Accessibility

- Toggle is a native button with aria-pressed and a label that switches between "Show password" and "Hide password" (messages.showPassword and messages.hidePassword).
- Description is linked through aria-describedby.
- Set autoComplete to current-password or new-password so password managers work.

## Motion

- A slash draws across the eye and masks the outline beneath it instead of swapping icons.
- After the first toggle, the value resolves through a short CSS reveal on each change; reduced motion draws the slash instantly.

## Responsive behavior

- The field fills its column; the reveal button sits inside the shell, so it never wraps below the input.
- Hover styles apply only on fine pointers.

## Performance

- One ResizeObserver per field measures the helper row for its height spring; cheap for a form, but avoid hundreds in a table.
- The reveal effect is a short CSS animation, and the slash is one drawn path.

## Notes for AI

- Use for sign in and password confirmation. Use password-strength when the user is creating a new password.
- Uncontrolled by default; pass value and onChange to control it like a native input.
- Every built-in string can be translated through messages; the label and description are your own props.

## Related

- [Password strength](https://ui.xzero.co.uk/components/password-strength/markdown): Show how strong a new password is while it is typed.
- [Input](https://ui.xzero.co.uk/components/input/markdown): A single line field with clear labels and useful states.

## Also in text fields

- [Textarea](https://ui.xzero.co.uk/components/textarea/markdown): A multiline field for notes, descriptions, and longer text.
- [Search field](https://ui.xzero.co.uk/components/search-field/markdown): A recognizable search entry point with clear affordances.
- [Expanding search](https://ui.xzero.co.uk/components/expanding-search/markdown): An icon that morphs into a search field with results beneath it.
- [Inline edit](https://ui.xzero.co.uk/components/inline-edit/markdown): Rename in place: the text becomes a field without moving.

## Guidance for AI tools

Password field: Capture sensitive text with a visible reveal control. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt