- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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> ); }