boundless-checkbox

Checkbox

An accessible checkbox with indeterminate support.

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:

import React from 'react';
import Checkbox from 'boundless-checkbox';

export default class CheckboxDemo extends React.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

// Bring in Boundless's base Stylus variables
@require "node_modules/boundless-checkbox/variables"

// 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.