React Button Checkbox

Display your input checkbox and radio like buttons.

Two components that can make a group of buttons behave like a set of checkboxes, radio buttons, or a hybrid where radio buttons can be unchecked.

Setup

You can import the lib with as AMD modules, CommonJS modules as a global JS script.

CommonJS / AMD


$ npm install react-btn-checkbox

var ReactBtn = require('react-btn-checkbox');
var Checkbox = ReactBtn.Checkbox;
var Radio = ReactBtn.Radio;

// or

var Checkbox = require('react-btn-checkbox').Checkbox;
var Radio = require('react-btn-checkbox').Radio;

// or (ES6 <3)

import {Checkbox, Radio} from 'react-btn-checkbox';

Browser globals

The package contains two files dist/react-btn-checkbox.min.js and dist/react-btn-checkbox.js with all components exported in the window.ReactBtn object. 

<script src='dist/react-btn-checkbox.min.js'></script>

<script>
  var Checkbox = ReactBtn.Checkbox;
  var Radio = ReactBtn.Radio;
<script>

Styles

Don't forget to include stylsheets from dist/react-btn-checkbox.min.css or dist/react-btn-checkbox.css 

<link rel='stylesheet' href='dist/react-btn-checkbox.min.css'>

Examples

Checkbox as Button Group


var Checkbox = ReactBtn.Checkbox;

var options = {
  'First': false,
  'Second': true,
  'Third': false
};

<Checkbox
  label='label'
  options={options}
  onChange={this.handleChange} />

Radio as Button Group


var Radio = ReactBtn.Radio;

var options = {
  'First': false,
  'Second': false,
  'Third': true
};

<Radio
  label='label'
  options={options}
  onChange={this.handleChange} />

With bootsrap styles

Add bootsrap attribute on component to enable use with Twitter Bootstrap button group styles. 

var Radio = ReactBtn.Radio;

var options = {
  'First': false,
  'Second': false,
  'Third': true
};

<Radio
  label='label'
  options={options}
  onChange={this.handleChange}
  bootstrap />