react-secure-input

A modern, accessible, and customizable React component library for handling secure password fields and form input components — built for speed, simplicity, and real-world use.

Features

All components are:

• ✅ Fully controlled
• 🎨 Minimal by default (unstyled or styleable)
• 🔌 Easily pluggable into any form (Formik, React Hook Form, etc.)

Core Components

🔐 PasswordInput

A secure password field with:

• Show/Hide toggle
• Optional copy-to-clipboard button
• Optional password strength meter
• Copy confirmation
• Accessible with labels, buttons, and ARIA attributes
• Easy to style or extend

📝 TextInput

A simple input with:

• Optional label
• Built-in trim/clean option
• Optional character limit
• Error handling via props

🧾 TextAreaInput

An auto-resizing textarea with:

• Optional character counter
• Auto-height adjustment
• Error display support
• Max character validation

🔽 SelectInput

A reusable dropdown component with:

• Label + placeholder support
• Error and helper text
• Custom option rendering
• Keyboard and screen reader friendly

Installation

npm install react-secure-input
# or
yarn add react-secure-input

Usage

import { 
  PasswordInput, 
  TextInput, 
  TextAreaInput, 
  SelectInput 
} from 'react-secure-input';

// Password Input
<PasswordInput
  label="Password"
  value={password}
  onChange={(val) => setPassword(val)}
  showCopy
  strengthMeter
/>

// Text Input
<TextInput
  label="Full Name"
  value={name}
  onChange={(val) => setName(val)}
  maxLength={40}
/>

// TextArea Input
<TextAreaInput
  label="Your message"
  value={message}
  onChange={(val) => setMessage(val)}
  maxLength={300}
/>

// Select Input
<SelectInput
  label="Country"
  value={country}
  options={[
    { label: 'USA', value: 'us' },
    { label: 'UK', value: 'uk' },
  ]}
  onChange={(val) => setCountry(val)}
/>

Why This Package?

• 🔁 Save time rewriting the same form logic
• ♻️ Reusable in every app (login, signup, profile, etc.)
• ⚙️ Framework-agnostic — works with React Hook Form, Formik, etc.
• 💻 Ideal for solo devs, startups, and MVPs
• 🧪 Unit-tested, typed (TypeScript ready), and documented

License

MIT