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

<FormControl
  variant="outlined"
  className={css.formControl}
  margin="dense"
  key={"abc_" + index}
>
  <FormControlLabel
    control={
      <Checkbox
        onClick={handleClick(data)}
        checked={_.some(selected, { Id: selected.Id })}
        value={selected.Id}
        color="default"
      />
    }
    label={data?.Name ?? "NO_LABEL"}
  />
</FormControl>

Now, this whole label gets clickable as the area is a bit long, so, what I am trying is the only the checkbox and the text should be clickable and the other empty space should not be clicked. Here , I have given the

max-width for that label to be 272px.

How do I add that?

Thanks.

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

<FormControl
  variant="outlined"
  className={css.formControl}
  margin="dense"
  key={"abc_" + index}
>
  <FormControlLabel
    control={
      <Checkbox
        onClick={handleClick(data)}
        checked={_.some(selected, { Id: selected.Id })}
        value={selected.Id}
        color="default"
      />
    }
    label={data?.Name ?? "NO_LABEL"}
  />
</FormControl>

Now, this whole label gets clickable as the area is a bit long, so, what I am trying is the only the checkbox and the text should be clickable and the other empty space should not be clicked. Here , I have given the

max-width for that label to be 272px.

How do I add that?

Thanks.

• javascript
• html
• reactjs
• material-ui

• It would be helpful if you could provide a code sandbox reproducing your problem of having empty space after the text that is clickable. I suspect this may have something to do with the CSS in your css.formControl class (probably setting an explicit width?). – Ryan Cogswell Commented Apr 6, 2020 at 16:18

3 Answers 3

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;

<FormControlLabel
  style={{ pointerEvents: "none" }}
  control={
    <Checkbox
      onClick={handleClick}
      style={{ pointerEvents: "auto" }}
      color="default"
    />
  }
  label={"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}
/>

This will do

MuiFormControlLabel: {
              styleOverrides: {
                root: {
                  width: "fit-content"
                }
              }
            }

I had the same problem with those checkboxes, see here: With dev tools:

The label takes whole space (purple space).

That is due to the FormGroup displaying children in a column flex container.

To fix it, in my custom overloaded checkbox, I used:

import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormGroup from '@material-ui/core/FormGroup';
import MUICheckbox from '@material-ui/core/Checkbox';

const useFormGroupStyles = makeStyles({
  root: {
    display: 'block',
  },
});

const Checkbox = (props) => {
  const { onCheck } = props;
  const formGroupClasses = useFormGroupStyles();
  const checkbox = (
    <MUICheckbox
      onChange={event => onCheck(event, event.target.checked)}
      icon={props.uncheckedIcon}
      checkedIcon={props.checkedIcon}
      color="primary"
      style={props.style}
    />
  );
  return (
    <FormGroup classes={formGroupClasses}>
      <FormControlLabel
        control={checkbox}
        label={props.label}
        style={props.style}
      />
    </FormGroup>
  );
};

export default Checkbox;