React — Radio Buttons

[Edit: October 2021]

[Comment: <InputGroup.Prepend> doesn’t seem to be available anymore. Other than that the rest of the article still works]

Recently I had to do some radio buttons for a form but couldn’t find a solution all in one place.

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>
</Col>

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"
/>