Password Field

A password input with a button that shows and hides what's typed.

import { Field, FieldLabel } from "@/components/ui/field";
import { PasswordField } from "@/components/ui/password-field";

export default function PasswordFieldBasic() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Password</FieldLabel>
      <PasswordField autoComplete="current-password" defaultValue="correct-horse" />
    </Field>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add password-field
pnpm dlx shadcn@latest add @jarvis/password-field

Usage

import { Field, FieldLabel } from "@/components/ui/field";
import { PasswordField } from "@/components/ui/password-field";

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

Password Field is an Input with an eye button at its end, which switches the input between type="password" and type="text". It takes everything Input does but type, including size and variant, and the button follows its size, its variant and its disabled state, including a disabled Field's. className and style go on the wrapper around the two, and every other prop on the input.

Set autoComplete so password managers know what to fill: current-password for signing in and new-password for signing up or changing it. Spellcheck, autocorrect and autocapitalization are off, so a shown password isn't sent to a spellchecker or changed as it's typed.

To show a secret the reader can't edit, such as an API key, use Secret Field.

Examples

New password

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { PasswordField } from "@/components/ui/password-field";

export default function PasswordFieldNewPassword() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>New password</FieldLabel>
      <PasswordField autoComplete="new-password" minLength={12} defaultValue="battery-staple-42" />
      <FieldDescription>Use at least 12 characters.</FieldDescription>
    </Field>
  );
}

Controlled

revealed and onRevealedChange control whether the password shows, here for two fields at once.

Show passwords

import * as React from "react";

import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { PasswordField } from "@/components/ui/password-field";

export default function PasswordFieldControlled() {
  const [revealed, setRevealed] = React.useState(false);

  return (
    <FieldGroup className="max-w-sm">
      <Field>
        <FieldLabel>New password</FieldLabel>
        <PasswordField
          autoComplete="new-password"
          defaultValue="battery-staple-42"
          revealed={revealed}
          onRevealedChange={setRevealed}
        />
      </Field>
      <Field>
        <FieldLabel>Confirm password</FieldLabel>
        <PasswordField
          autoComplete="new-password"
          defaultValue="battery-staple-42"
          revealed={revealed}
          onRevealedChange={setRevealed}
        />
      </Field>
      <Field orientation="horizontal">
        <Checkbox
          id="show-passwords"
          checked={revealed}
          onCheckedChange={(checked) => setRevealed(checked)}
        />
        <FieldLabel htmlFor="show-passwords">Show passwords</FieldLabel>
      </Field>
    </FieldGroup>
  );
}

Sizes

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

export default function PasswordFieldSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <PasswordField size="sm" aria-label="Small password" defaultValue="correct-horse" />
      <PasswordField aria-label="Default password" defaultValue="correct-horse" />
      <PasswordField size="lg" aria-label="Large password" defaultValue="correct-horse" />
    </div>
  );
}

Invalid

import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { PasswordField } from "@/components/ui/password-field";

export default function PasswordFieldInvalid() {
  return (
    <Field invalid className="max-w-sm">
      <FieldLabel>Password</FieldLabel>
      <PasswordField autoComplete="new-password" defaultValue="hunter2" />
      <FieldError>Use at least 12 characters.</FieldError>
    </Field>
  );
}

Disabled

import { Field, FieldLabel } from "@/components/ui/field";
import { PasswordField } from "@/components/ui/password-field";

export default function PasswordFieldDisabled() {
  return (
    <Field disabled className="max-w-sm">
      <FieldLabel>Password</FieldLabel>
      <PasswordField defaultValue="correct-horse" />
    </Field>
  );
}

Props

Part	Extends
PasswordField	Input

PasswordField

Prop	Type	Default
`variant`	`"default" \| "underline"`	`"default"`
`size` The height: `sm` 24px, `default` 28px, `lg` 32px.	`"default" \| "lg" \| "sm"`	`"default"`
`revealed` Whether the password shows as plain text.	`boolean`	—
`defaultRevealed`	`boolean`	`false`
`onRevealedChange`	`((revealed: boolean) => void)`	—
`className` CSS class applied to the element.	`string`	—
`style` Style applied to the element.	`React.CSSProperties`	—