# @bolttech/atoms-input

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

Latest version **0.30.5** (published 2026-06-29) · 0 weekly downloads

## Install

```sh
npm install @bolttech/atoms-input
pnpm add @bolttech/atoms-input
yarn add @bolttech/atoms-input
bun add @bolttech/atoms-input
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.30.5 |
| Published | 2026-06-29 |
| First published | 2023-03-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 104.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | andsfranbolt, danielkhalebbatista, pauloazevedo-ed, bruno.gomes, plinio.altoe, joaoteixeira20, esteve-cabrera, jabolttech, lucasvpaiva, herberts.fortuna, matheus.maciel.bolttech, silas.silva.bolttech |

## Links

- npm: https://www.npmjs.com/package/@bolttech/atoms-input
- npm.io page: https://npm.io/package/@bolttech/atoms-input

## Dependencies (5)

- [react](https://npm.io/package/react.md) 19.1.2
- [styled-components](https://npm.io/package/styled-components.md) 6.1.1
- [@bolttech/ui-utils](https://npm.io/package/@bolttech/ui-utils.md) 0.6.7
- [@bolttech/atoms-icon](https://npm.io/package/@bolttech/atoms-icon.md) 0.24.9
- [@bolttech/atoms-tooltip](https://npm.io/package/@bolttech/atoms-tooltip.md) 0.5.3

## Recent versions

- 0.30.5 (latest) — 2026-06-29
- 0.30.4 — 2026-06-08
- 0.30.3 — 2026-04-14
- 0.30.1 — 2026-04-08
- 0.30.0 — 2026-04-08
- 0.28.2 — 2026-03-05
- 0.29.0 — 2025-12-17
- 0.28.1 — 2025-07-15
- 0.28.0 — 2025-03-03
- 0.27.1 — 2024-12-12
- 0.27.0 — 2024-12-05
- 0.26.1 — 2024-09-10
- 0.26.0 — 2024-09-04
- 0.25.0 — 2024-09-04
- 0.24.0 — 2024-09-02
- … 51 more at https://npm.io/package/@bolttech/atoms-input/versions

## README

# Input Component

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

## Installation

Use the package manager [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) 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 (
    <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](link-to-issues) or submit a pull request.

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

---
_Source: https://npm.io/package/@bolttech/atoms-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._