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.

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

or

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. | | 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

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 (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Input
        id="input-id"
        dataTestId="custom-input"
        variant="grey"
        errorMessage="Invalid input"
        icon="search"
        label="Search"
        required
        onClickIcon={handleClickIcon}
        disabled={false}
        value="Sample text"
      />
    </BolttechThemeProvider>
  );
};

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.