PasswordInput Component

Secure password input with visibility toggle control to help users securely enter passwords.

Form Control

Live Preview

Password

Usage

import { PasswordInput } from '@featherstudio/react-daisyui-kit';
import { useState } from 'react';

export default function App() {
  const [password, setPassword] = useState('');

  return (
    <PasswordInput
      value={password}
      onChange={(value) => setPassword(value as string)}
      placeholder="Enter password"
    />
  );
}

Features

Visibility Toggle

Easy toggle button to show/hide password.

Secure by Default

Password is masked initially for security.

User Friendly

Toggle helps users verify their input easily.

Customizable Icons

Use custom icons for visibility controls.

Props

Prop	Type	Default	Description
value	string	-	Password value
onChange	function	-	Change handler
placeholder	string	-	Placeholder text
showPasswordToggle	boolean	true	Show visibility toggle
disabled	boolean	false	Disable input

← Back to Components