Material-ui Formcontrollabel Whole Label Is Clickable Only Text Should Be

I am new to the material UI. here I have the following form

Solution 1:

You can prevent parent elements from click events, as well as allow the child to do it.

Use pointer-events to disable click event.

pointer-events: none;

<FormControlLabelstyle={{pointerEvents: "none" }}
  control={
    <CheckboxonClick={handleClick}style={{pointerEvents: "auto" }}
      color="default"
    />
  }
  label={"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}
/>

Share