How to change the size and color of the checkbox in Material UI?

A checkbox is a key component when there is a need to choose multiple options from a list of options. To have control over the size of the checkboxes and to match the web design, ensure that proper sizes and colors have been added.

In this article, we are going to learn how to change the size and color of the checkbox in Material UI. Creating a React project and adding the Material UI to it are prerequisites before continuing with the article. Let us begin and see how to modify the checkbox's size and color in its entirety.

Steps to Modify Checkbox Size and Color

Below are the complete steps for modifying the sizes and colors of checkboxes in Material UI using React −

Step 1: Create a new react app and Install MUI

To begin with, we must first have a React app with Material UI installed. Let’s create a new React app and install Mui by running the following command −

npx create-react-app myproject
cd myproject
npm install @mui/material @emotion/react @emotion/styled

Step 2: Import the required components into React

Now, when the new React app is created, in the src folder there is a main App.js file. Open it and import the Checkbox component to change the size and colors of the checkboxes.

import React from "react";
import { Checkbox } from '@mui/material

export default function App() {
   return (
      …
   )
}

Step 3: Modify the checkbox size and color

Here's how using Material UI, we can change the size and colors of checkboxes in React. Later on, we will look at some examples that show various approaches to labeling checkboxes.

<Checkbox {...label} size="small" color="primary" />
<Checkbox {...label} defaultChecked color="success" />

Now, we have seen the complete steps to modify or change the size and colors of the checkboxes in Material UI using react. Let’s see some examples that use different approaches to do the needful.

Checkbox Label APIs

• <Checkbox> − This API is used to add a checkbox component feature to the project using Material UI.

Props

• checked − This prop is used to check the checkbox when true.

• checkedIcon − This prop is used to display an icon when checked.

• classes − This prop is used to override or add styles to an element.

• color − This prop is used to add color to the checkboxes. It includes primary, secondary, success, info, error, warning, etc.

• defaultChecked − This prop is used to check the checkbox when not controlled by user.

• disabled − This prop is used to disable the checkbox.

• disableRipple − This prop is used to disable the checkbox ripple effect.

• icon − This prop is used to display icons when unchecked.

• id − This prop is used to define checkbox id.

• Inderterminate − This prop is used to indeterminate the checkbox.

• indeterminateIcon − This prop is used to display the indeterminate icon in the checkbox.

• inputProps − This prop is used to add attributes to the input element.

• inputRef − This prop is used to pass the ref to the checkbox.

• onChange − This prop is used to fire a callback function.

• required − This prop is used to add a required value for the input element.

• size − This prop is used to change the checkbox size.

• sx − This prop is used to add custom styles to the material UI components.

• value − This prop is used to define the component value.

Example

In this example, we've designed some checkboxes with varying sizes. You can adjust the checkbox sizes using the "size" property, which offers medium and large options.

import Checkbox from "@mui/material/Checkbox";
import React from "react";

export default function App() {
   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <Checkbox size="small"  />
         <Checkbox size="medium" />
         <Checkbox size="large" />
      </div>
   );
}

Output

Example

In this example, we've also created checkboxes with colors. By utilizing the "color" property you can change the checkbox color to info, warning, success, default, or error.

import Checkbox from "@mui/material/Checkbox";
import React from "react";

export default function App() {
   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <Checkbox size="medium" color="default" />
         <Checkbox size="medium" color="error" />
         <Checkbox size="medium" color="info" />
         <Checkbox size="medium" color="success" />
         <Checkbox size="medium" color="primary" />
         <Checkbox size="medium" color="secondary" />
         <Checkbox size="medium" color="warning" />
      </div>
   );
}

Output

Example

Moreover, to add labels to our checkboxes and customize their colors further, we've utilized the FormControlLabel component. Like before, you can modify the checkbox color by using the "color" property mentioned earlier.

import { FormControlLabel, FormGroup } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import React from "react";

export default function App() {
   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <FormGroup>
            <FormControlLabel control={<Checkbox color="primary" />} label="Primary checkbox" />
            <FormControlLabel control={<Checkbox color="secondary" />} label="Secondary checkbox" />
            <FormControlLabel control={<Checkbox color="info" />} label="info checkbox" />
            <FormControlLabel control={<Checkbox color="error" />} label="error checkbox" />
            <FormControlLabel control={<Checkbox color="warning" />} label="warning checkbox" />
            <FormControlLabel control={<Checkbox color="success" />} label="success checkbox" />
         </FormGroup>
      </div>
   );
}

Output

Example

In this example, for customization options in terms of size and color variations (including primary, secondary info, warning, success, default, and error), we've combined both the "size" and "color" properties when creating checkboxes with labels using FormControlLabel.

import { FormControlLabel, FormGroup } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import React from "react";

export default function App() {
   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <FormGroup>
            <FormControlLabel control={<Checkbox color="primary" size="small"/>}label="Primary checkbox"/>
            <FormControlLabel control={<Checkbox color="secondary" size="small"/>}label="Secondary checkbox"/>
            <FormControlLabel control={<Checkbox color="info" size="medium"/>}label="info checkbox"/>
            <FormControlLabel control={<Checkbox color="error" size="medium"/>}label="error checkbox"/>
            <FormControlLabel control={<Checkbox color="warning" size="large"/>}label="warning checkbox"/>
            <FormControlLabel control={<Checkbox color="success"size="large"/>}label="success checkbox"/>
         </FormGroup>
      </div>
   );
}

Output

Example

In this example, we have created custom checkboxes with labels with the help of the FormControlLabel, which uses the ‘sx’ prop to change the sizes and colors.

import { FormControlLabel, FormGroup } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import React from "react";

export default function App() {
   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <FormGroup>
            <FormControlLabel
               label="custom checkbox"
               control={
                  <Checkbox
                     sx={{
                        "& .MuiSvgIcon-root": {
                           fill: "pink",
                           fontSize: 80,
                        },
                     }}
                  />
               }
               sx={{
                  '& .MuiFormControlLabel-label': {
                     color: 'pink',
                     fontSize: 40,
                  },
               }}
            />
            <FormControlLabel
               label="custom checkbox"
               control={
                  <Checkbox
                     sx={{
                        "& .MuiSvgIcon-root": {
                           fill: "orange",
                           fontSize: 100,
                        },
                     }}
                  />
               }
               sx={{
                  '& .MuiFormControlLabel-label': {
                     color: 'orange',
                     fontSize: 60,
                  },
               }}
            />
            <FormControlLabel
               label="custom checkbox"
               control={
               <Checkbox
                  sx={{
                     "& .MuiSvgIcon-root": {
                        fill: "violet",
                        fontSize: 120,
                     },
                  }}
               />
               }
               sx={{
                  '& .MuiFormControlLabel-label': {
                     color: 'violet',
                     fontSize: 80,
                  },
               }}
            />
         </FormGroup>
      </div>
   );
}

Output