Change the size of a checkbox with Material UI

Question

I'm currently having trouble changing the size of a checkbox to a custom one using Material UI. The code is the following

<Checkbox
    label="Check this box"
    onChange={() => dispatch(switchCompleted())}
    checked={status.showCompleted}
    style={{
      color: "#00e676",
      width: 36,
      height: 36
    }}
  />

I also tried using size: 'medium' but the size of the checkbox stays small. Does anyone know how to solve this?

Answer 1

Since the Checkbox item is actually an svg image, you can increase its size with transform.

You could style the Checkbox with an inline style like below:

<Checkbox
        style={{
            transform: "scale(2)",
        }}
    />

If you're using the Material UI styling solution, you can achieve this with a class.

const useStyles = makeStyles((theme) => ({
    tickSize: {
        transform: "scale(1.5)",
    },
}));

You can then apply the above class to your Checkbox(s):

<Checkbox color="default" className={classes.tickSize} />

Answer 2

You can add custom classes to it:

<Checkbox
    label="Check this box"
    onChange={() => dispatch(switchCompleted())}
    checked={status.showCompleted}
    classes={{root: 'custom-checkbox-root'}}
  />

and then in a css file:

.custom-checkbox-root .MuiSvgIcon-root{
  width: 36px;
  height: 36px;
}

You can check out more in api docs