0.0.6 • Published 12 months ago
@quickat/field-input v0.0.6
Field Input
A customizable and accessible input field component built with React, TypeScript, and Tailwind CSS. Supports validation, inline editing, password toggling, and verification indicators.
✨ Features
- 📝 Supports text, email, password, and other input types
- ✅ Inline editing with an edit toggle button
- 🔒 Password visibility toggle
- 🎯 Validation for required fields, min/max length, and email format
- ✅ Verification status indicators (verified/unverified)
- 🎨 Customizable styles via props
- 🎨 Tailwind CSS Powered - Built with Tailwind utility classes for consistent styling
📦 Installation
Install via npm or yarn:
npm install @quickat/field-input
or
yarn add @quickat/field-input📌 Props Table
| Prop Name | Type | Description | Default |
|---|---|---|---|
type | "text" \| "password" \| "email" \| "date" \| "month" \| "tel" \| "number" \| "hidden" | Type of the input field | "text" |
label | string | Label for the input field | "" |
description | string | Additional description text | "" |
verified | boolean \| "none" | Displays a verified (✔) or unverified (⚠) icon | "none" |
editable | boolean | Allows toggling input editability | true |
errorMessage | string | Error message to display | "" |
mainContainerStyles_FI | string | Custom styles for the main container | "" |
infoContainerStyles_FI | string | Custom styles for label and description container | "" |
labelStyles_FI | string | Custom styles for the label | "" |
descriptionStyles_FI | string | Custom styles for the description text | "" |
inputStyles_FI | string | Custom styles for the input field | "" |
errorStyles_FI | string | Custom styles for error message | "" |
value | string \| number | Value of the input field | "" |
onChange | (event: React.ChangeEvent<HTMLInputElement>) => void | Function to handle input change | undefined |
onBlur | (event: React.FocusEvent<HTMLInputElement>) => void | Function to handle input blur | undefined |
required | boolean | Whether the field is required | false |
min | number \| string | Minimum length (if applicable) | undefined |
max | number \| string | Maximum length (if applicable) | undefined |
pattern | string | Regex pattern for validation | "" |
placeholder | string | Placeholder text | "" |
disabled | boolean | Disables the input field | false |