# @material/react-checkbox

> Material Components React Checkbox

Latest version **0.15.0** (published 2019-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @material/react-checkbox
pnpm add @material/react-checkbox
yarn add @material/react-checkbox
bun add @material/react-checkbox
```

## Health

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

Positive: has types; no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.15.0 |
| Published | 2019-07-22 |
| First published | 2018-10-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 205.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | abhiomkar, acdvorak, aprigogin, azakus, bicknellr, bonniez, bwobrien, kfranqueiro, lynnjepsen, material-admin, moog16, patrickrodee, williamernest |
| Keywords | mdc web react, material components react, material design, checkbox |

## Links

- npm: https://www.npmjs.com/package/@material/react-checkbox
- Repository: https://github.com/material-components/material-components-web-react
- Homepage: https://github.com/material-components/material-components-web-react#readme
- Issues: https://github.com/material-components/material-components-web-react/issues
- npm.io page: https://npm.io/package/@material/react-checkbox

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@material/checkbox](https://npm.io/package/@material/checkbox.md) ^2.1.1
- [@material/react-ripple](https://npm.io/package/@material/react-ripple.md) ^0.15.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.15.0 (latest) — 2019-07-22
- 0.14.1 — 2019-07-02
- 0.14.0 — 2019-06-25
- 0.13.0 — 2019-05-30
- 0.12.0 — 2019-05-01
- 0.11.0 — 2019-03-19
- 0.10.0 — 2019-02-19
- 0.9.0 — 2019-01-23
- 0.8.0 — 2018-12-28
- 0.7.1 — 2018-11-30
- 0.7.0 — 2018-11-20
- 0.6.2 — 2018-11-07
- 0.6.1 — 2018-10-25
- 0.6.0 — 2018-10-24

## README

# React Checkbox

A React version of an [MDC Checkbox](https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox).

## Installation

```
npm install @material/react-checkbox
```

## Usage

### Styles

with Sass:
```js
import '@material/react-checkbox/index.scss';
```

with CSS:
```js
import "@material/react-checkbox/dist/checkbox.css";
```

### Javascript Instantiation

```js
import React from 'react';
import Checkbox from '@material/react-checkbox';

class MyApp extends React.Component {
  state = {checked: false, indeterminate: false};

  render() {
    return (
      <React.Fragment>
        <Checkbox
          nativeControlId='my-checkbox'
          checked={this.state.checked}
          indeterminate={this.state.indeterminate}
          onChange={(e) => this.setState({
            checked: e.target.checked,
            indeterminate: e.target.indeterminate})
          }
        />
        <label htmlFor='my-checkbox'>My Checkbox</label>
      </React.Fragment>
    );
  }
}
```

> _NOTE_: In order to get access to the checked or indeterminate value, you must add an `onChange` handler that accepts an `Event` and updates state as shown above.

## Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the checkbox element
checked | Boolean | Indicates whether the checkbox is checked ("on")
indeterminate | Boolean | Indicates whether the checkbox is indeterminate
disabled | Boolean | Indicates whether the checkbox is disabled
nativeControlId | String | Id attached to the native control for relationship with the label

## Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.

[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/master/packages/mdc-checkbox/README.md#sass-mixins)

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