Input Component

A customizable input component with optional icon, label, and error message support.

Installation

Use the package manager npm or yarn to install the component and its dependencies.

``bash
npm install @bolttech/frontend-foundations @bolttech/atoms-input
`

or

`bash
yarn add @bolttech/frontend-foundations @bolttech/atoms-input
`

Props

The Input component accepts the following properties:

| Prop | Type | Description |
| ------------- | ------------------------------------- | ----------------------------------------------------------------------------------- |
| id | string | The id attribute of the input component. |
| dataTestId | string | The data-testid attribute for testing. |
| variant | InputVariants | The variant of the input component (default is 'grey'). |
| errorMessage | string | An error message to be displayed. |
| icon | string | An icon to be displayed on the right side of the input. |
| tooltip | object | The properties of the tooltip shown when hovering the icon in the provided position |
| label | string | A label to describe the input. |
| required | boolean | Whether the input is required or not. |
| onClickIcon | function | A function to be called when the icon is clicked. |
| disabled | boolean | Whether the input is disabled or not. |
| value | string | The value of the input. |
| onBlur | (value: unknown) => void or (...) | Event handler when the input loses focus. |
| onFocus | (value: unknown) => void or (...) | Event handler when the input gains focus. |
| onChange | (value: unknown) => void or (...) | Event handler when the input value changes. |
| helperMessage | string | An optional string to display as a helper message for the input. |
| ...props | object | Additional props that can be passed to the HTML input element. |

Usage

`jsx
import React from 'react';
import { Input } from '@bolttech/atoms-input';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

const ExampleComponent = () => {
const handleClickIcon = () => {
console.log('Icon Clicked');
};

return (



);
};

export default ExampleComponent;
``

Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.