A rewrite of react-checkbox-group with accessibility features


002.0.0-beta.44 years ago4 years agoMinified + gzip package size for accessible-react-checkbox-group in KB



Travis npm package Coveralls


This is a remake of react-checkbox-group that adds full accessibility support. Some other issues are also fixed, such as using React's context API for efficiency and to allow for HOCs.


This is your average checkbox group:

  <input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="apple" />Apple
  <input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="orange" />Orange
  <input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="watermelon" />Watermelon

Repetitive, hard to manipulate and easily desynchronized. Lift up name and onChange, and give the group an initial checked values array:

import {Checkbox, CheckboxGroup} from 'accessible-react-checkbox-group';

<CheckboxGroup name="fruits" checkedValues={['kiwi', 'pineapple']} onChange={this.fruitsChanged}>
  <Checkbox value="kiwi"/>
  <Checkbox value="pineapple"/>
  <Checkbox value="watermelon"/>

Listen for changes, get the new value as intuitively as possible:

<CheckboxGroup name="fruit" checkedValues={['apple','watermelon']} onChange={this.handleChange}>

and further

function handleChange(newValues) {
  // ['apple']

That's it for the API! See below for a complete example.


bower install accessible-react-checkbox-group


npm install accessible-react-checkbox-group

Simply require/import it to use it:

var Check = require('accessible-react-checkbox-group');
var Checkbox = Check.Checkbox;
var CheckboxGroup = Check.CheckboxGroup;

// or ES6
import {Checkbox, CheckboxGroup} from 'accessible-react-checkbox-group';

How to Contribute

Please check out for information on contributing.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from