@cloudflare/component-checkbox

@cloudflare/component-checkbox

Cloudflare Checkbox Component

Installation

Installation with yarn is recommended

$ yarn add @cloudflare/component-checkbox

Usage

import React from 'react';
import { Checkbox, CheckboxGroup } from '../../src';

class CheckboxComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkbox1: true,
      checkbox2: false,
      checkboxValues: ['option1'],
      checkbox5: false
    };
    this.onCheckboxGroupChange = this.onCheckboxGroupChange.bind(this);
  }

  onCheckboxGroupChange(values) {
    this.setState({
      checkboxValues: values
    });
  }

  render() {
    return (
      <div>
        <p>
          You can create them individually with <code>Checkbox</code>
        </p>

        <Checkbox
          label="Checkbox 1"
          name="checkbox-1"
          value="checkbox1"
          checked={this.state.checkbox1}
          onChange={event => this.setState({ checkbox1: event.target.checked })}
        />

        <Checkbox
          label="Checkbox 2"
          name="checkbox-2"
          value="checkbox2"
          checked={this.state.checkbox2}
          onChange={event => this.setState({ checkbox2: event.target.checked })}
        />

        <p>
          Or as a group with <code>CheckboxGroup</code>
        </p>

        <CheckboxGroup
          values={this.state.checkboxValues}
          onChange={this.onCheckboxGroupChange}
        >
          <Checkbox label="Checkbox 3" name="checkbox-3" value="checkbox3" />
          <Checkbox
            mt={2}
            label="Checkbox 4"
            name="checkbox-4"
            value="checkbox4"
          />
        </CheckboxGroup>

        <p>
          You can also disable a label by passing <code>false</code> explicitly
        </p>

        <Checkbox
          label={false}
          name="checkbox-5-no-label"
          value="checkbox5"
          checked={this.state.checkbox5}
          onChange={event => this.setState({ checkbox5: event.target.checked })}
        />
      </div>
    );
  }
}

export default CheckboxComponent;