How to display link in checkbox label in react?-CodePudding

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

CodePudding user response：

You can pass a react component to the label prop 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>
  );

CodePudding user response：

"label" ist of type ReactNode:

https://react-bootstrap.github.io/forms/checks-radios/#form-check-props

so we just can do following:

label={<span>I agree to the <a href="#">terms and conditions</a></span>}

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