# @ds-kit/checkbox

> Checkbox component

Latest version **2.1.0** (published 2019-08-22) · LicenseRef-LICENSE license · 0 weekly downloads

## Install

```sh
npm install @ds-kit/checkbox
pnpm add @ds-kit/checkbox
yarn add @ds-kit/checkbox
bun add @ds-kit/checkbox
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2019-08-22 |
| First published | 2019-07-15 |
| Weekly downloads | 0 |
| License | LicenseRef-LICENSE |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | LapidusInteractive |
| Maintainers | amytych, lapidus, zimrick |

## Links

- npm: https://www.npmjs.com/package/@ds-kit/checkbox
- npm.io page: https://npm.io/package/@ds-kit/checkbox

## Dependencies (1)

- [reakit](https://npm.io/package/reakit.md) ^1.0.0-beta.4

## Recent versions

- 2.1.0 (latest) — 2019-08-22
- 2.0.0 — 2019-08-09
- 1.0.0 — 2019-07-15

## README

---
title: "Checkbox"
slug: "/packages/checkbox"
category: "control"
componentNames:
  - "Checkbox"
---

# Checkbox

The Checkbox component that follows the WAI-ARIA Checkbox Pattern.

```js
import Checkbox from "@ds-kit/checkbox"
```

## Basic Example (Uncontrolled)

A basic example of an uncontrolled Checkbox component can look like this:

```jsx
<>
  <Checkbox value="blue" text="blue" />
  <Checkbox value="red" text="red" />
</>
```

## Controlled Checkbox

```jsx
<>
  <Checkbox
    checked={true}
    value="red"
    onChange={() => alert("click red")}
    text="red"
  />
  <Checkbox
    checked={false}
    value="blue"
    onChange={() => alert("click blue")}
    text="blue"
  />
</>
```

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