MUI - Click link in Checkbox label

user_13621903 0
Viewed 1017

I want to make a "Terms of Use" checkbox, and I'm using FormControlLabel for nesting a Checkbox for it, but I need to make a link that when clicked is opening a Dialog component, that is rendering the terms, but when I click on the link "" it also checks the checkbox, since it's inside the label.

It's pretty hard trying to make a structure to make it look good, so it would be beneficial if it was possible to render the link inside the label as well.

Here is the code:

<FormGroup row className={localClasses.greenCheckbox}>
  <FormControlLabel
    control={
      <Checkbox
        checked={state.lgpd_agreement}
        onChange={lgpdAgreementOnChange}
        name="lgpd_agreement"
      />
    }
    label={
      <p>
        Autorizo a #### coletar e armazenar meus dados com a finalidade
        de fornecer os serviços do programa conforme o respectivo
        Termo&nbsp;
  <span className={localClasses.openDialogButton} onClick={() => handleOpenModal('authTerm')}>Ler</span>
      </p>
    }
  />
</FormGroup>
material-ui reactjs html javascript
1 Answers

Call e.preventDefault() to cancel the current event so the Checkbox state is not updated:

<FormControlLabel
  control={<Checkbox name="lgpd_agreement" />}
  label={
    <p>
      random text
      <Link
        onClick={(e) => {
          e.preventDefault();
          alert('link clicked!');
        }}
      >
        Your Link
      </Link>
    </p>
  }
/>

Codesandbox Demo

user_94494260
Related