How can I make a React-Bootstrap radio group required with HTML validation?

Question

I'm using a pair of React-Bootstrap radio buttons in my app. I need to require that the user make a selection. However, adding required as seen here doesn't have the same effect that it would on an HTML radio input.

<Form.Check inline label="One" type='radio' required />
<Form.Check inline label="Two" type='radio' required />

How can I apply the HTML5 required attribute here? I'm looking for basic HTML5 validation, not React validation.

Answer 1

Had the same issue as you, it's actually very simple and it's a shame they don't specify in the documentation.

Give them all the same name.

<Form.Check name="grouped" required inline label="One" type='radio' />
<Form.Check name="grouped" required inline label="Two" type='radio' />