PasswordInput

Text input for editing password values, with a button to toggle visibility.

Installation

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

Usage

import { PasswordInput } from "@/components/admin";
 
<PasswordInput source="password" />;

By default the value is hidden as ••••••. Click the eye button to toggle visibility.

Props

Prop	Required	Type	Default	Description
`source`	Required	`string`	-	Field name
`className`	Optional	`string`	-	Wrapper classes
`defaultValue`	Optional	`string`	-	Default value
`disabled`	Optional	`boolean`	-	If true, the input is disabled
`format`	Optional	`function`	-	Callback taking the value from the form state, and returning the input value
`helperText`	Optional	`ReactNode`	-	Help text
`initiallyVisible`	Optional	`boolean`	`false`	Whether the password should be shown in plain text on first render
`inputClassName`	Optional	`string`	-	Classes applied to the underlying `<input>` element
`label`	Optional	`string` \| `false`	Inferred	Custom / hide label
`parse`	Optional	`(value:string) => any`	-	Callback taking the value from the input, and returning the value to be stored in the form state
`placeholder`	Optional	`string`	-	Placeholder text
`validate`	Optional	`Validator` \| `Validator[]`	-	Validation

Additional props are forwarded to the underlying <TextInput> (and ultimately to the HTML <input>).

`initiallyVisible`

Set initiallyVisible to true to make the password value visible by default:

<PasswordInput source="password" initiallyVisible />

Validation

Combine PasswordInput with ra-core validators to enforce password rules:

import { minLength, required } from "ra-core";
import { PasswordInput } from "@/components/admin";
 
<PasswordInput source="password" validate={[required(), minLength(8)]} />;