Custom Input Component

A highly customizable and reusable input component for React, designed with flexibility and style in mind. This project provides a set of features to create various input types with built-in validation, error handling, and styling options.

Features

• Customizable Styles: Easily adjust padding, font size, colors, and border styles.
• Validation: Built-in support for error and success messages.
• Flexibility: Supports various input types and can include icons.
• Accessibility: Designed to be accessible and user-friendly.

Props

• label (string): The label for the input field.
• placeholder (string): Placeholder text for the input field.
• value (string): Value of the input field.
• onChange (function): Function to handle input changes.
• type (string): Type of input (e.g., "text", "password"). Defaults to "text".
• icon (React.ReactNode): Optional icon to display inside the input field.
• error (string | null): Error message to display.
• success (string | null): Success message to display.
• disabled (boolean): Whether the input is disabled. Defaults to false.
• width (string): Width of the input field. Defaults to "100%".
• height (string): Height of the input field. Defaults to "40px".
• padding (string): Padding for the input field. Defaults to "8px 12px".
• fontSize (string): Font size for the input field. Defaults to "16px".
• color (string): Font color for the input field. Defaults to "#333".
• backgroundColor (string): Background color for the input field. Defaults to "#fff".
• borderColor (string): Border color for the input field. Defaults to "#ccc".
• borderRadius (string): Border radius for the input field. Defaults to "8px".

Acknowledgments

• React: A JavaScript library for building user interfaces.
• Styled Components: Visual primitives for the component age.