react-bootstrap ButtonGroup as radio buttons

The framework has changed since the accepted answer and they have now replicated the option group behavior of Bootstrap framework. All you need to do now is to add a group name to each option in the group:

<Radio name="groupOptions">Option 1</Radio>
<Radio name="groupOptions">Option 2</Radio>
<Radio name="groupOptions">Option 3</Radio>

So I ended up nesting a radio Input in the Button like you would normally do in Bootstrap.

render() {
  return (
    <ButtonGroup>
      <Button active>Radio 1
        <Input ref="input1" type="radio" name="radioButtonSet" value='input1' standalone defaultChecked/>
      </Button>
      <Button>Radio 2
        <Input ref="input2" type="radio" name="radioButtonSet" value='input2' standalone/>
      </Button>
    </ButtonGroup>
  )
}

I also overrode the default .radio css to fix how it's displayed.

.radio {
  margin-top: 0;
  margin-bottom: 0;
}

React-bootstrap has plans to implement RadioGroup eventually: https://github.com/react-bootstrap/react-bootstrap/issues/342

Some of the answers on this page don't work. Maybe things have changed since then.

I put together this with the help of React Bootstrap website.

<Col>
    <InputGroup>
        <InputGroup.Prepend>
            <InputGroup.Radio  name="group1"/>
            <InputGroup.Text >London</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl/>
    </InputGroup> 
    <InputGroup>
        <InputGroup.Prepend>
            <InputGroup.Radio  name="group1"/>
            <InputGroup.Text >New York</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl/>
    </InputGroup> 
    <InputGroup>
        <InputGroup.Prepend>
            <InputGroup.Radio  name="group1"/>
            <InputGroup.Text >Colombo</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl/>
    </InputGroup> 

To make the radio button set function as a single group you have to give them a name (so that only one radio button is selected at any given time).

Adding a form control makes the edges of the input nicely rounded off but it also makes the radio button label editable. If this is a problem you can leave out the form control.

If you want a different look and feel you can try this.

<Form.Check
    type="radio"
    label="London"
    name="group2"
    id="radio1"
/> 
<Form.Check
    type="radio"
    label="New York"
    name="group2"
    id="radio2"
/> 
<Form.Check
    type="radio"
    label="Colombo"
    name="group2"
    id="radio3"
/> 

However with these getting the value and handling onChange was difficult. Eventually I used another control.

This is a npm package called react-radio-group. You have to install it by running this line on the command.

npm install react-radio-group

Then import it in your file.

import { Radio, RadioGroup} from 'react-radio-group'

Here's the code for the button group.

<RadioGroup name="fruits" onChange={(e) => handleOnChange(e)}>
   <div className="radio-button-background">
       <Radio value="Apple" className="radio-button" />Apple
   </div>
   <div className="radio-button-background">
       <Radio value="Orange" className="radio-button" />Orange
   </div>
   <div className="radio-button-background">
       <Radio value="Banana" className="radio-button" />Banana
   </div>
</RadioGroup>

classNames are where I have given the styles.