Input

Customizable input components with password visibility toggle and form integration

Note

All presented components are responsive and compatible with Tailwind CSS. Make sure Tailwind is configured in your project to use them.

Password Input

Prop	Type	Description	Default
`className`	`string`	Additional CSS classes for styling	`undefined`
`disabled`	`boolean`	Disables the input field	`undefined`
`placeholder`	`string`	Placeholder text for the input	`undefined`
`value`	`string`	Controlled value of the input	`undefined`
`onChange`	`(e: ChangeEvent) => void`	Callback fired when value changes	`undefined`

Prop	Type	Description	Default
`minLength`	`number`	Minimum password length	`undefined`
`maxLength`	`number`	Maximum password length	`undefined`
`requireUppercase`	`boolean`	Require at least one uppercase letter	`false`
`requireLowercase`	`boolean`	Require at least one lowercase letter	`false`
`requireNumbers`	`boolean`	Require at least one number	`false`
`requireSpecialChars`	`boolean`	Require at least one special character	`false`
`showRules`	`boolean`	Display password validation rules	`false`
`showStrength`	`boolean`	Display password strength indicator	`false`
`customRules`	`PasswordRule[]`	Custom validation rules	`[]`
`onPasswordChange`	`(password: string, isValid: boolean, rules: PasswordRule[]) => void`	Callback fired when password changes	`undefined`

PasswordRule Interface:

interface PasswordRule {
  id: string;
  label: string;
  validator: (password: string) => boolean;
}

Usage: