@bolttech/atoms-input NPM

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

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;