How to display link in checkbox label in react?

Question

I wanted to display a link inside react-bootstrap check box label as per attached image how to format the tags in side label? please help.

<Form.Check
    className="checkbox-groove"
    label="I agree to the {<a>terms and conditions</a>}"
    name="group1"         
  />

https://codesandbox.io/s/display-link-inside-a-input-label-0vosse

Answer 1

You can pass a react component to the label prop react bootstrap docs like so:

  return (
    <div className="App">
      <Form.Check
        className="checkbox-groove"
        label={
          <span>
            I agree to the <a href="#">terms and conditions</a>
          </span>
        }
        name="group1"
      />
    </div>
  );

https://codesandbox.io/s/display-link-inside-a-input-label-forked-jzusxj