Password field

When to use #

Use it for

Sign-in and sign-up forms.
Anywhere a person might mistype and want to check.

Skip it when

The secret is a one-time code; use the OTP input.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/password-field.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

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

export function CurrentPassword() {
  return (
    <div className="w-full max-w-xs">
      <PasswordField label="Password" name="password" autoComplete="current-password" />
    </div>
  );
}

API reference #

PasswordField

component

Also accepts the native props of its root element and a ref.

PropTypeDefault

label *string—

descriptionstring—

messages{ show?: string | undefined; hide?: string | undefined; }—

It exposes status semantics, with aria-describedby, aria-pressed, aria-label and aria-hidden kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.