Necessarily Precedes Mischief


    1.1.0 • Public • Published


    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.


    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(`${} ${ ? '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'>
                    { => {
                        return (
                                onChange={this.handleInteraction} />

    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';


    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


    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"


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


    npm i boundless-checkbox

    DownloadsWeekly Downloads






    Last publish


    • sighrobot