Checkbox

Components and their props

Checkbox
- disabled true/false
  This makes the checkbox disabled
- checked true/false
  This makes the checkbox checked
- indeterminate true/false
  This makes the checkbox indeterminate

Sample code

import {h, Component} from 'preact';
import Checkbox from 'preact-material-components/Checkbox';
import Formfield from 'preact-material-components/FormField';
import 'preact-material-components/Checkbox/style.css';

export default class CheckboxPage extends Component {
  render(){
    return (
      <Formfield>
        <Checkbox id="basic-checkbox" ref={cb=>{this.cb=cb;}}/>
        <label for="basic-checkbox" id="basic-checkbox-label">This is my checkbox</label>
      </Formfield>
    );
  }
}

Original documentation

This component encapsulates mdc-checkbox, you can refer to its documentation here.

Demo

Basic Checkbox

Basic checkbox

<Formfield>
  <Checkbox
    id="basic-checkbox"
  />
  <label for="basic-checkbox">
    Basic checkbox
  </label>
</Formfield>

Indeterminate Checkbox

Indeterminate checkbox

<Formfield>
  <Checkbox
    id="indeterminate-checkbox"
    indeterminate={true}
  />
  <label for="indeterminate-checkbox">
    Indeterminate checkbox
  </label>
</Formfield>

Checked

Controlled checkbox

<Formfield>
  <Checkbox
    id="controlled-checkbox"
    checked={true}
  />
  <label for="controlled-checkbox">
    Controlled checkbox
  </label>
</Formfield>