abaabil.checkbox

Input Component

The Input component is a customizable and accessible input field designed for React applications. This component is part of the abaabil.input package and supports various input types with flexible styling and accessibility features.

Installation

To install the Input component, use npm or yarn:

npm install abaabil.input

or

yarn add abaabil.input

Usage

After installation, you can import and use the Input component in your React project as follows:

import Input from 'abaabil.input';

function App() {
  return (
    <div>
      <Input label="Your Name" placeholder="Enter your name" />
    </div>
  );
}

export default App;

Disabled State Example

You can disable the Input component to make it non-interactive:

import Input from 'abaabil.input';

function App() {
  return (
    <div>
      <Input label="Disabled Input" placeholder="Cannot type here..." disabled />
    </div>
  );
}

export default App;

Properties

The Input component accepts several properties to customize its behavior and appearance:

Property	Type	Default	Description
type	string	'text'	The type of input field. Available types include text, password, email, search, number, date, time, and datetime-local.
label	string	''	The label for the input field.
value	string	''	The controlled value of the input field.
containerClassName	string	''	Additional CSS classes to apply to the outer container wrapping the entire input field.
labelClassName	string	''	Additional CSS classes to apply to the label element.
inputClassName	string	''	Additional CSS classes to apply to the input element itself.
disabled	boolean	false	Disables the input field if set to true.
ariaLabel	string	''	Defines a string value that labels the input field.
ariaDescribedBy	string	''	Identifies the element that describes the input field.
ariaRequired	boolean	false	Indicates whether the input field is required.
onChange	function	null	Callback function that triggers when the input value changes.

Input Types

The Input component supports the following types:

• text - Text Input
• password - Password Input
• email - Email Input
• search - Search Input
• number - Number Input
• date - Date Picker
• time - Time Picker
• datetime-local - Date-Time Picker

Example Usage with Different Input Types

import Input from 'abaabil.input';

function App() {
  return (
    <div className="space-y-4">
      <Input label="Text Input" placeholder="Type here..." />
      <Input label="Password Input" type="password" placeholder="Password" />
      <Input label="Email Input" type="email" placeholder="Email" />
      <Input label="Search Input" type="search" placeholder="Search" />
      <Input label="Number Input" type="number" placeholder="Number" />
      <Input label="Date Picker" type="date" />
      <Input label="Time Picker" type="time" />
      <Input label="Date-Time Picker" type="datetime-local" />
    </div>
  );
}

export default App;

Customizing the Component

You can customize the Input component using the containerClassName, labelClassName, and inputClassName properties to apply your custom styles.

<Input
  label="Custom Styled Input"
  placeholder="Enter something..."
  containerClassName="mb-4"
  labelClassName="text-lg font-bold"
  inputClassName="border-gray-300 rounded"
/>

Accessibility

The Input component includes several accessibility properties such as ariaLabel, ariaDescribedBy, and ariaRequired to enhance the usability of the input fields for all users.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Summary of README.md Content:

• Installation: Instructions for installing the Input component.
• Usage: Basic usage examples, including an example of a disabled state.
• Properties: A table describing the properties that can be passed to the component.
• Input Types: A list of supported input types with an example usage.
• Customization: Guidance on how to apply custom styles.
• Accessibility: Highlights the accessibility features of the component.
• License: Indicates that the project is licensed under the MIT License.