Bootstrap: Checkboxes and radios

Default (Stacked)

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

We provide Checkbox and Radio component that reduces a lot of redundant code. This is preferred to using native Input checkbox/radio elements.

<Checkbox>
  Option one is this and that&mdash;be sure to include why it's great
</Checkbox>
<Checkbox disabled>
  Option two is disabled
</Checkbox>
<Radio name='optionsRadios' value='option1'>
  Option one is this and that&mdash;be sure to include why it's great
</Radio>
<Radio name='optionsRadios' value='option2'>
  Option two can be something else and selecting it will deselect option one
</Radio>
<Radio disabled name='optionsRadios' value='option3'>
  Option three is disabled
</Radio>

Inline checkboxes and radios

Use the attribute inline on a series of checkboxes or radios for controls that appear on the same line.

<div>
  <Checkbox inline defaultChecked>1</Checkbox>
  <Checkbox inline>2</Checkbox>
  <Checkbox inline>3</Checkbox>
  <Checkbox inline disabled>4</Checkbox>
</div>
<div>
 <Radio inline name='inline' value='option1'>1</Radio>
 <Radio inline defaultChecked name='inline' value='option2'>2</Radio>
 <Radio inline name='inline' value='option3'>3</Radio>
 <Radio inline disabled name='inline' value='option4'>4</Radio>
</div>

Bootstrap: Rubix Enhancements [API]

getChecked()

Access checked state of checkbox/radio. Example:

var demo = React.createClass({
  componentDidMount: function() {
    var checkedState = this.refs.check.getChecked();
    console.log(checkedState === true);
  },
  render: function() {
    return (
      <Checkbox ref='check' defaultChecked>
        Should be checked
      </Checkbox>
    );
  }
});

setChecked(true|false)

Set checked state of checkbox/radio. Example:

var demo = React.createClass({
  componentDidMount: function() {
    this.refs.check.setChecked(false);
    console.log(checkedState === false);
  },
  render: function() {
    return (
      <Checkbox ref='check' defaultChecked>
        Should be checked
      </Checkbox>
    );
  }
});

isChecked()

Test if checked. Example:

var demo = React.createClass({
  componentDidMount: function() {
    if(this.refs.check.isChecked())
      console.log('Checkbox is checked');
    else
      console.log('Checkbox is unchecked');
  },
  render: function() {
    return (
      <Checkbox ref='check' defaultChecked>
        Should be checked
      </Checkbox>
    );
  }
});

getValue()

Convenience function to get the value of the inner span element. Example:

var demo = React.createClass({
  componentDidMount: function() {
    var value = this.refs.check.getValue();
    console.log(value === 'Should be checked');
  },
  render: function() {
    return (
      <Checkbox ref='check' defaultChecked>
        Should be checked
      </Checkbox>
    );
  }
});