<RadioGroup/> for React Bootstrap - https://react-bootstrap-radio-group.surge.sh

README.md

To run the example:

npm install -g nwb
react run example.js --auto-install

example.js

import 'bootstrap/dist/css/bootstrap.css'

import React from 'react'
import Grid from 'react-bootstrap/lib/Grid'
import Col from 'react-bootstrap/lib/Col'

import RadioGroup from './RadioGroup'

export default class Example extends React.Component {
  state = {
    test: ''
  }
  handleChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
  }
  render() {
    return <Grid>
      <Col sm={12} style={{marginBottom: '1em'}}>
        <h1>&lt;RadioGroup/&gt;</h1>
        <RadioGroup
          name="test"
          onChange={this.handleChange}
          options={[
            ['dairy', 'Cheese'],
            ['fruit', 'Apple'],
            ['meat', 'Ham'],
          ]}
          value={this.state.test}
        />
      </Col>
      <Col sm={12}>
        <pre>{`<RadioGroup
  name="test"
  onChange={this.handleChange}
  options={[
    ['dairy', 'Cheese'],
    ['fruit', 'Apple'],
    ['meat', 'Ham'],
  ]}
  value={this.state.test}
/>`}</pre>
      </Col>
    </Grid>
  }
}

RadioGroup.js

import React, {PropTypes as t} from 'react'
import Button from 'react-bootstrap/lib/Button'
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'

/**
 * A ButtonGroup whose buttons act like a radio button.
 * Options should be passed as a list of [value, display] tuples.
 * Buttons are set up so you can use e.target.name and e.target.value in your
 * onChange handler like you would with regular form inputs.
 */
let RadioGroup = React.createClass({
  propTypes: {
    name: t.string.isRequired,
    onChange: t.func.isRequired,
    options: t.arrayOf(t.arrayOf(t.string)),
    value: t.string.isRequired,
  },
  render() {
    let {disabled, name, onChange, options, value, ...props} = this.props
    return <ButtonGroup {...props}>
      {options.map(option =>
        <Button
          key={option[0]}
          bsStyle={option[0] === value ? 'primary' : 'default'}
          children={option[1]}
          disabled={disabled}
          name={name}
          onClick={onChange}
          value={option[0]}
        />
     )}
    </ButtonGroup>
  }
})

export default RadioGroup

I've been messing with this in a react app project I'm working on, and I can get everything to work as far as sending the right radio button info, but for some reason the colors/class doesn't change when clicked. I've looked at the code and it looks nearly identical. Any ideas?

Refactored as a React.Component:

import React from 'react';
import {PropTypes as types} from 'prop-types';
import Button from 'react-bootstrap/lib/Button';
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';

/**
 * A ButtonGroup whose buttons act like a radio button.
 * Options should be passed as a list of [value, display] tuples.
 * Buttons are set up so you can use e.target.name and e.target.value in your
 * onChange handler like you would with regular form inputs.
 *
 * source: https://gist.github.com/insin/1c50f520926fb9e2b2ae3eab148770e4
 */
class RadioGroup extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    let {disabled, name, onChange, options, value, ...props} = this.props
    return <ButtonGroup {...props}>
      {options.map(option =>
        <Button
          key={option[0]}
          bsStyle={option[0] === value ? 'primary' : 'default'}
          children={option[1]}
          disabled={disabled}
          name={name}
          onClick={onChange}
          value={option[0]}
        />
      )}
    </ButtonGroup>
  }
}

RadioGroup.propTypes = {
  name: types.string.isRequired,
    onChange: types.func.isRequired,
    options: types.arrayOf(types.arrayOf(types.string)),
    value: types.string.isRequired,
}

export default RadioGroup;