This package has been deprecated

    Author message:

    This package has been deprecated. Please find this package under its new name @cloudflare/component-checkbox.

    cf-component-checkbox

    5.0.0 • Public • Published

    cf-component-checkbox

    Cloudflare Checkbox Component

    Installation

    Installation with yarn is recommended

     
    $ yarn add cf-component-checkbox
     

    Usage

    import React from 'react';
    import {
      Checkbox,
      CheckboxUnstyled,
      CheckboxTheme,
      CheckboxGroup
    } from 'cf-component-checkbox';
    import { applyTheme } from 'cf-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;
     

    Keywords

    none

    Install

    npm i cf-component-checkbox

    DownloadsWeekly Downloads

    6

    Version

    5.0.0

    License

    BSD-3-Clause

    Unpacked Size

    31 kB

    Total Files

    11

    Last publish

    Collaborators

    • jgentes
    • threepointone
    • rexscaria
    • dcruz_cf
    • xuranwang
    • jculvey
    • sejoker
    • caass
    • vasturiano
    • cf-ci-write
    • segments-write
    • thibmeu
    • nataliescottdavidson
    • xortive
    • gurjinder
    • cf-ci2
    • lvalenta
    • nilslice
    • worenga