Password Input

Password Input is a thin wrapper around AffixInput with type="password", an optional leading affix, and a trailing show-hide toggle. Registry item password-input pulls input, inputs-internals, button, tooltip, and fui-i18n, and declares lucide-react.

For empty read-only values, use Empty Value Placeholder.

Installing

pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/password-input.json

npx shadcn@latest add https://ui.isaacfei.com/r/password-input.json

yarn dlx shadcn@latest add https://ui.isaacfei.com/r/password-input.json

bun x shadcn@latest add https://ui.isaacfei.com/r/password-input.json

With a namespace: npx shadcn@latest add @f-ui/password-input.

Usage

import { PasswordInput } from '@/components/f-ui/password-input/password-input';

<PasswordInput
  value={password}
  onChange={(e) => setPassword(e.target.value)}
  autoComplete="current-password"
/>

Examples

"use client";

import { useState } from "react";

import {
  EmptyValuePlaceholder,
  isEmptyDisplayValue,
} from "@/components/f-ui/empty-value-placeholder";
import { PasswordInput } from "@/components/f-ui/password-input/password-input";

export function PasswordInputDemo() {
  const [value, setValue] = useState("");

  return (
    <div className="max-w-sm space-y-3">
      <PasswordInput
        value={value}
        onChange={(e) => setValue(e.target.value)}
        aria-label="Password"
      />
      <p className="text-muted-foreground flex flex-wrap items-center gap-x-1 gap-y-0.5 text-xs">
        <span>Value:</span>
        {isEmptyDisplayValue(value) ? (
          <EmptyValuePlaceholder />
        ) : (
          <span className="text-foreground font-medium tabular-nums">
            {"•".repeat(value.length)}
          </span>
        )}
      </p>
    </div>
  );
}

API Reference

• Thin wrapper around AffixInput (PasswordInput export) with type="password" and an optional trailing show-hide toggle.
• visibilityToggle: show the trailing eye toggle (default true).
• leadingSlot: optional leading affix (no default icon).
• visible / onVisibleChange: controlled visibility state for the show-hide toggle.
• No default placeholder — set one when your form needs hint text.
• t: per-instance i18n override for show/hide toggle labels (showPassword, hidePassword).
• Inherits standard controlled Input props (value, onChange, disabled, className, aria-*, etc.).