# @bolttech/atoms-checkbox

> A simple React checkbox component.

Latest version **0.24.0** (published 2026-06-30) · 0 weekly downloads

## Install

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

## 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.24.0 |
| Published | 2026-06-30 |
| First published | 2023-03-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 131.8 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-checkbox
- npm.io page: https://npm.io/package/@bolttech/atoms-checkbox

## Dependencies (4)

- [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/frontend-foundations](https://npm.io/package/@bolttech/frontend-foundations.md) 0.12.3

## Recent versions

- 0.24.0 (latest) — 2026-06-30
- 0.23.5 — 2026-06-08
- 0.23.4 — 2026-05-06
- 0.23.3 — 2026-04-14
- 0.23.1 — 2026-04-08
- 0.23.0 — 2026-04-08
- 0.22.1 — 2026-03-05
- 0.22.0 — 2025-12-17
- 0.21.3 — 2025-09-15
- 0.21.2 — 2025-09-15
- 0.21.1 — 2025-09-10
- 0.21.0 — 2024-12-30
- 0.20.3 — 2024-09-05
- 0.20.2 — 2024-09-05
- 0.20.1 — 2024-09-04
- … 39 more at https://npm.io/package/@bolttech/atoms-checkbox/versions

## README

# Checkbox Component

A simple React checkbox component.

## Installation

Use the package manager [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install the component.

```bash
npm install @bolttech/frontend-foundations @bolttech/atoms-checkbox
```

or

```bash
yarn add @bolttech/frontend-foundations @bolttech/atoms-checkbox
```

## Props

The `Checkbox` component accepts the following properties:

| Prop         | Type          | Description                                                                                       |
|--------------|---------------|---------------------------------------------------------------------------------------------------|
| id           | `string`      | The ID attribute for the checkbox element.                                                         |
| label        | `string`      | The label text for the checkbox.                                                                  |
| disabled     | `boolean`     | Disables the checkbox when set to `true`.                                                         |
| errorMessage | `string`      | An optional error message to be displayed.                                                        |
| ref          | `object`      | A reference object for the checkbox element.                                                       |
| checked      | `boolean`     | Determines whether the checkbox is checked or not.                                                 |
| onChange     | `function`    | Callback function to handle the checkbox change event.                                            |
| onBlur       | `function`    | Callback function to handle the checkbox blur event.                                              |
| onFocus      | `function`    | Callback function to handle the checkbox focus event.                                             |

## Usage

```jsx
import React, {useState} from 'react';
import {Checkbox} from '@bolttech/atoms-checkbox';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

const ExampleComponent = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Checkbox
        id="custom-checkbox"
        label="Check me"
        disabled={false}
        errorMessage="This field is required"
        checked={isChecked}
        onChange={handleCheckboxChange}
      />
    </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-checkbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._