Better Password Textfield

A modern React component library that provides secure password inputs and matching text inputs with consistent styling for your authentication forms.

---

🌟 Why Choose Better Password Textfield?

• Complete authentication form solution: Includes both password and text input components with unified design
• Smart password management: Built-in show/hide toggle and secure password generator
• Zero configuration: Works out of the box with sensible defaults
• Developer friendly: TypeScript support with comprehensive type definitions
• Security focused: Encourages strong password practices through built-in generation
• Production ready: Actively maintained with regular updates and community support

Key Features: Password visibility toggle, secure password generator, consistent text inputs, TypeScript support.

---

📖 Live Storybook

View the Storybook ↗

---

🚀 Installation

pnpm add better-password-textfield
# or
npm install better-password-textfield

---

🛠 Getting Started

Quick Setup

import { TextInput, PasswordInput } from "better-password-textfield";

export default function LoginForm() {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
      <TextInput
        value={email}
        onChange={setEmail}
        placeholder="Enter your email"
        type="email"
      />
      <PasswordInput
        value={password}
        onChange={setPassword}
        placeholder="Enter your password"
        showGenerator={false}
      />
    </div>
  );
}

Authentication Forms

Login Form - Clean and minimal for existing users:

<PasswordInput showGenerator={false} placeholder="Enter your password" />

Signup Form - Enhanced with password generation for new users:

<PasswordInput showGenerator={true} placeholder="Create a password" />

Input Types

The TextInput component supports various input types for different use cases:

// Email addresses
<TextInput type="email" placeholder="Enter your email" />

// Usernames
<TextInput type="text" placeholder="Enter username" />

// Phone numbers
<TextInput type="tel" placeholder="Enter phone number" />

// URLs
<TextInput type="url" placeholder="Enter website URL" />

---

⚙️ API Reference

PasswordInput

Prop	Type	Default	Description
value	string	""	Current password value
onChange	(value: string) => void	undefined	Password change callback
placeholder	string	"Enter password"	Placeholder text
showGenerator	boolean	true	Toggle password generator visibility

TextInput

Prop	Type	Default	Description
value	string	""	Current input value
onChange	(value: string) => void	undefined	Input change callback
placeholder	string	"Enter text"	Placeholder text
type	"text" | "email" | "tel" | "url"	"text"	HTML input type

---

📄 License

MIT © Sachin Kanishka

---

🙏 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check issues page.

---

Made with ❤️ by Sachin Kanishka