Password Input

A password input with a visibility toggle button.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { PasswordInput } from "@/components/ui/password-input";
 
export function PasswordInputDemo() {
  return (
    <Field>
      <FieldLabel htmlFor="password-input-demo">Password</FieldLabel>
      <PasswordInput
        autoComplete="current-password"
        id="password-input-demo"
        placeholder="Enter your password"
      />
      <FieldDescription>Click the eye icon to reveal your password.</FieldDescription>
    </Field>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/password-input"

Usage

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

<PasswordInput placeholder="Enter your password" />

Props

Prop	Type	Default	Description
`showPassword`	`boolean`	-	Controlled visibility state.
`defaultShowPassword`	`boolean`	`false`	Initial visibility state (uncontrolled).
`onShowPasswordChange`	`(showPassword: boolean) => void`	-	Callback when visibility is toggled.
`className`	`string`	-	Class name applied to the input.
`hasError`	`boolean`	`false`	Shows error state with a destructive border.
`clearable`	`boolean`	`false`	Enables a clear button when value is present.
`onClear`	`() => void`	-	Callback fired when the clear button is clicked.
`leftAddon`	`React.ReactNode`	-	Content displayed before the input field.
`rightAddon`	`React.ReactNode`	-	Content displayed after the input field.
`disabled`	`boolean`	`false`	Disables the input and toggle button.

Examples

Default

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { PasswordInput } from "@/components/ui/password-input";
 
export function PasswordInputDemo() {
  return (
    <Field>
      <FieldLabel htmlFor="password-input-demo">Password</FieldLabel>
      <PasswordInput
        autoComplete="current-password"
        id="password-input-demo"
        placeholder="Enter your password"
      />
      <FieldDescription>Click the eye icon to reveal your password.</FieldDescription>
    </Field>
  );
}

On This Page

Installation Usage Props Examples Default