A React version of an MDC Checkbox.
npm install @material/react-checkbox
with Sass:
import '@material/react-checkbox/index.scss';with CSS:
import "@material/react-checkbox/dist/checkbox.css";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
onChangehandler that accepts anEventand updates state as shown above.
| 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 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.