How to implement React Bootstrap Radio Buttons

Question

I've been digging through the documentations for the past 2 hours and I can't figure out how to implement radio buttons with bootstrap (not that I've done it with react at all, but still).

The only documentation that I have found about Radio buttons is this: https://react-bootstrap.github.io/components/input-group/ under "Checkboxes and Radios" I can't even figure out how to give text to the radio buttons!

Here is what I've tried:

    <InputGroup>
      <InputGroup.Radio
        value="hi"
        aria-label="Radio button for following text input"
      ></InputGroup.Radio>

      <InputGroup.Radio
        value="hi1"
        aria-label="Radio button for following text input"
      ></InputGroup.Radio>

      <InputGroup.Radio
        value="hi2"
        aria-label="Radio button for following text input"
      ></InputGroup.Radio>

      <InputGroup.Radio
        value="h3"
        aria-label="Radio button for following text input"
      ></InputGroup.Radio>
    </InputGroup>

They don't even behave as Radio buttons, I can click on all of them and all of them will be checked.

I have also tried wrapping them in <InputGroup.Prepend> (whatever that is), but it didn't help.

Answer 1

So currently they are behaving as independent radio buttons (not forming a group). You need to provide a name prop which is same for all the radio buttons in a group, they are bound together by that.

Something like this:

<InputGroup>
  <InputGroup.Radio value="1" name="test" aria-label="Radio 1" />some text
  <InputGroup.Radio value="2" name="test" aria-label="Radio 2" />or this text
  <InputGroup.Radio value="3" name="test" aria-label="Radio 3" />no, that text
</InputGroup>