🧩 React InputField Component

A lightweight and customizable React input component with built-in icons for user, email, and password fields — including an eye/eye-slash toggle for showing and hiding passwords.

Perfect for modern form UIs that need visual clarity and flexibility.
Supports custom icons, tints, positioning, and easy styling via CSS.

Default icons

1. user
2. email
3. password
4. eye/eyeSlash

Features

✅ User, Email, and Password icons included
✅ Built-in Eye / Eye-Slash toggle for passwords
✅ Custom icon override support (own image or SVG)
✅ Change icon color tint dynamically
✅ Lightweight — built with Vite
✅ Easy to style with your own CSS
✅ Supports both left/right icon placement

Installation

Install via npm:

npm install input-field-zn

Usage Example

import React, { useState } from "react";
import InputField from "input-field-zn";
import "input-field-zn/dist/index.css";

function App() {
  const [formData, setFormData] = useState({ email: "", password: "",contact:null });

  return (
    <div style={{ width: "250px", margin: "50px auto" }}>
      <InputField
        type="email"
        name="email"
        value={formData.email}
        placeholder="Enter email"
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        iconOverRide={{ icon: true, iconName: "email" }}
      />

      <InputField
        type="password"
        name="password"
        value={formData.password}
        placeholder="Enter password"
        onChange={(e) => setFormData({ ...formData, password: e.target.value })}
        iconOverRide={{ icon: true, iconName: "password", iconEye: true }}
      />
      <InputField
        type="number"
        name="contact"
        value={formData.contact}
        placeholder="Enter contact"
        onChange={(e) => setFormData({ ...formData, contact: e.target.value })}
        // iconOverRide={{ icon: false, iconName: "password", iconEye: false }}
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | | -------------- | ---------- | -------------- | ---------------------------------------- | | value | string | "" | Input value | | name | string | — | Input name | | type | string | "text" | Input type (text, email, password, etc.) | | placeholder | string | "Enter text" | Placeholder text | | onChange | function | — | Change handler | | className | string | — | Add custom class to container | | iconOverRide | object | {} | Customize icon appearance and behavior |

iconOverRide Object Options

| Option | Type | Default | Description | | --------------- | --------- | ------------------------- | --------------------------------------- | | icon | boolean | false | Show/hide icon | | iconName | string | "user" | One of: user, email, password | | iconPath | string | — | Custom image path for icon | | iconEye | boolean | false | Show password toggle (eye/eye-slash) | | iconEyePath | array | [eyeIcon, eyeSlashIcon] | Custom icons for eye/eye-slash | | width | string | "22px" | Icon width | | top | string | "7px" | Top offset | | left | string | "6px" | Left offset | | right | string | "6px" | Right offset | | iconPosition | string | "left" | Position of icon: "left" or "right" | | iconTint | number | 0 | Invert color tint (0–1 range) | | iconEyeTint | number | 0 | Invert color tint for eye icons | | iconClassName | string | "" | Additional class for icon styling |