Password field

• 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:

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

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

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

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

Examples

Translated

<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: Show how strong a new password is while it is typed.
• Input: A single line field with clear labels and useful states.

Also in text fields

• Textarea: A multiline field for notes, descriptions, and longer text.
• Search field: A recognizable search entry point with clear affordances.
• Expanding search: An icon that morphs into a search field with results beneath it.
• Inline edit: 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