Password field

Capture sensitive text with a visible reveal control.

fieldsecurity

Preview

Live · keyboard ready

Password

Too short

Use at least 12 characters.

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.

shadcn CLI

Also installs (1)

manicat-foundation

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "password-field",
  "type": "registry:ui",
  "title": "Password field",
  "description": "Capture sensitive text with a visible reveal control.",
  "categories": [
    "inputs"
  ],
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json"
  ],
  "files": [
    {
      "path": "registry/components/password-field/password-field.tsx",
      "type": "registry:component",
      "target": "@components/manicat/password-field/password-field.tsx"
    },
    {
      "path": "registry/components/password-field/password-field.module.css",
      "type": "registry:component",
      "target": "@components/manicat/password-field/password-field.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/password-field",
  "meta": {
    "tier": "free",
    "kind": "component",
    "docs": "https://manicat.viraza.net/components/password-field",
    "markdown": "https://uiarc.dev/components/password-field/markdown",
    "tags": [
      "field",
      "security"
    ]
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

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

export function PasswordFieldExample() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <PasswordField label="Password" placeholder="At least 12 characters" />
      <PasswordField label="Too short" defaultValue="short" description="Use at least 12 characters." />
    </div>
  );
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Create a password Password field, strength meter and a confirmation that only validates once both match.

Live · keyboard ready

New password

At least 12 characters, not met
Upper and lowercase letters, not met
At least one number, not met
At least one symbol, not met

Confirm password

Type it once more.

create-a-password-password-field-strength-meter-and-a-confirmation-that-only-validates-once-both-match-.tsxtsx

"use client";

import { useState } from "react";
import { PasswordField } from "@/components/manicat/password-field/password-field";
import { PasswordStrength } from "@/components/manicat/password-strength/password-strength";

export function PasswordFieldCreateExample() {
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const mismatch = confirm.length > 0 && confirm !== password;

  return (
    <div className="grid w-full max-w-sm gap-4">
      <PasswordStrength label="New password" value={password} onValueChange={setPassword} />
      <PasswordField
        label="Confirm password"
        value={confirm}
        onChange={(event) => setConfirm(event.target.value)}
        description={mismatch ? "Passwords don't match yet." : "Type it once more."}
      />
    </div>
  );
}

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.