A password field with a trailing button that toggles between masked and plain text. It is built from the input-group primitive, so the toggle sits inside the same bordered control as the input. Every native <input> prop is forwarded — name, value / defaultValue, onChange, placeholder, disabled — so it drops into a form like a plain input.

Installation

{
  "registries": {
    "@ikui": "https://ik-ui.pages.dev/r/{name}.json"
  }
}

pnpm dlx shadcn@latest add @ikui/password-input

Usage

import { PasswordInput } from "@/components/password-input";

<PasswordInput name="password" placeholder="Password" />

Examples

Controlled

value + onChange work exactly as on a native input. The toggle only switches the rendered type; it never changes the value.

Disabled

disabled dims the field and also disables the show/hide toggle.

Props

PasswordInput accepts every prop of a native <input> element (React.ComponentProps<"input">) and forwards them to the underlying control.