CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
PRANAV
PRANAV

Reputation: 1109

How to display link in checkbox label in react?

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

enter image description here

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

Upvotes: 0

Views: 484

Answers (1)

Moath
Moath

Reputation: 578

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

Upvotes: 5

Related Questions