@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,
  CheckboxUnstyled,
  CheckboxTheme,
  CheckboxGroup
} from '@cloudflare/component-checkbox';
import { applyTheme } from '@cloudflare/style-container';

const CheckboxGroupItem = applyTheme(CheckboxUnstyled, CheckboxTheme, ({}) => ({
  marginTop: '1em',

  '&:first-child': {
    marginTop: 0
  }
}));

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}
        >
          <CheckboxGroupItem
            label="Checkbox 3"
            name="checkbox-3"
            value="checkbox3"
          />
          <CheckboxGroupItem
            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;