@bolttech/atoms-input

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

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.