How do I create links(or pass any other html/jsx) into the label of the Material-UI <Checkbox ... label="string"/> component

Question

I'm looking for insight on how to pass custom jsx into the label of the Checkbox component.

<Checkbox
    label="I accept the Terms of Use & Privacy Policy"
/>

Ideally what would render as the label is "I accept the [Terms of Use] & [Privacy Policy]" where the items inside the brackets are links.

Thanks in advance for any help!

Answer 1

You can pass in other jsx nodes into the label property. In this example I am using the React Router link but you could of course use an anchor element.

<Checkbox
  label={
   <div>
      <span>I accept the </span>
      <Link to={'/terms'}>terms of use</Link>
      <span> and </span>
      <Link to={'/privacy'}>privacy policy</Link>
   </div>
   }
 />

Answer 2

You can use html in the label property. But you'll have a problem : the component is "covered" by a transparent input which will handle every click. So links or onClicks won't work. Before the library developers resolve the problem, you can use :

<Checkbox id={uniqueId}
      labelStyle={{ zIndex: 3 }}
      label={(
                <label htmlFor={uniqueId}>
                          blah blah
                          <span onClick={this.myAction}>yeah</span>
                          <a>...</a>
                </label>
      )}/>

Details here => https://github.com/callemall/material-ui/issues/5364