boundless-checkbox

Checkbox

Checkbox is implemented as a "controlled input", meaning it is a direct representation of the model data passed inside. User interaction will bubble changes in the form of onChecked and onUnchecked that a controller view must intercept and apply against the data provider.

Installation

npm i boundless-checkbox --save

Then use it like:

/** @jsx createElement */
 
import { createElement, PureComponent } from 'react';
import Checkbox from 'boundless-checkbox';
 
export default class CheckboxDemo extends PureComponent {
    state = {
        checkboxes: [ {
            checked: false,
            indeterminate: false,
            label: 'An unchecked checkbox',
            name: 'box1',
        }, {
            checked: true,
            indeterminate: false,
            label: 'A checked checkbox',
            name: 'box2',
        }, {
            checked: false,
            indeterminate: true,
            label: 'An indeterminate (mixed) checkbox',
            name: 'box3',
        } ],
    }
 
    handleInteraction(event) {
        // eslint-disable-next-line no-alert
        alert(`${event.target.name} ${event.target.checked ? 'checked' : 'unchecked'}!\n\nThe input will now revert to its previous state because this demo does not persist model changes.`);
    }
 
    render() {
        return (
            <div className='spread'>
                {this.state.checkboxes.map((definition) => {
                    return (
                        <Checkbox
                            key={definition.name}
                            inputProps={definition}
                            label={definition.label}
                            onChange={this.handleInteraction} />
                    );
                })}
            </div>
        );
    }
}

Checkbox can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { Checkbox } from 'boundless';

Props

Note: only top-level props are in the README, for the full list check out the website.

Required Props

There are no required props.

Optional Props

• * · any React-supported attribute

  Expects	Default Value
  any	n/a

• component · any valid HTML tag name

  Expects	Default Value
  string	'div'

• inputProps · all input-specific props like value, name, etc should be passed here -- common ones are listed below

  Expects	Default Value
  object	{ checked: false, indeterminate: false }

• label · any React-renderable content, most commonly a simple string

  Expects	Default Value
  any renderable	null

• labelProps

  Expects	Default Value
  object	{}

• onChecked · called when the element becomes checked; backing data must be updated to persist the state change

  Expects	Default Value
  function	() => {}

• onUnchecked · called when the element becomes unchecked; backing data must be updated to persist the state change

  Expects	Default Value
  function	() => {}

Reference Styles

Stylus

You can see what variables are available to override in variables.styl.

// Redefine any variables as desired, e.g:
color-accent = royalblue
 
// Bring in the component styles; they will be autoconfigured based on the above
@require "node_modules/boundless-checkbox/style"

CSS

If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css, based on Boundless's default variables.