closure-react-checkbox

0.7.9 • Public • Published

React Checkbox

A React version of an MDC Checkbox.

Installation

npm install @material/react-checkbox

Usage

Styles

with Sass:

import '@material/react-checkbox/index.scss';

with CSS:

import "@material/react-checkbox/dist/checkbox.css";

Javascript Instantiation

import React, {Component} from 'react';
import Checkbox from '@material/react-checkbox';

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

  render() {
    return (
      <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 for='my-checkbox'>My Checkbox</label>
    );
  }
}

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

Package Sidebar

Install

npm i closure-react-checkbox

Weekly Downloads

3

Version

0.7.9

License

MIT

Unpacked Size

767 kB

Total Files

18

Last publish

Collaborators

  • yang_ji