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