Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Customize Checkboxes in Material-UI
Material UI, a used frontend library offers a variety of pre designed and customizable UI components. When building forms or applications that require user input and selections checkboxes are commonly used. However, what if you want to personalize your checkboxes with attributes, like size, color, design, text, icons and more? Luckily Material UI has you covered with its customization options that allow you to easily style checkboxes according to your applications design and branding needs.
In this article, we will explore the process of customizing checkboxes in Material UI. Before diving, in it is important to have a React project set up and include the Material UI library. Let's begin by understanding how to customize input checkboxes
Steps to customize checkboxes
Below, we have outlined the step, by step process for customizing the checkboxes in Material UI using React.
Step 1: Create a new react app and Install MUI
First, let's start by creating a React app and installing Material UI. Follow these steps
Open your terminal and run the command
npx create react app projectname
After the project is created, navigate to the project directory by running
cd projectname
Install Material UI and its dependencies by running
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 required components.
import React from "react";
import { FormControlLabel, Checkbox } from '@mui/material
export default function App() {
return (
<FormControlLabel
control={<Checkbox />}
?
/>
)
}
Now we have gone through all the steps to create and import the required components. Let's explore some examples that illustrate customizing the checkboxes with different approaches.
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 input element.
inputRef This prop is used to pass ref to 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 developed checkboxes and applied styling to both the checkboxes themselves and their labels using the property. We've utilized utility classes for customization.
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
sx={{
"& .MuiSvgIcon-root": {
fill: "orange",
fontSize: 100,
},
}}
/>
}
label="Java"
sx={{
"& .MuiFormControlLabel-label": {
color: "orange",
fontSize: 60,
},
}}
/>
<FormControlLabel
control={
<Checkbox
sx={{
"& .MuiSvgIcon-root": {
fill: "skyblue",
fontSize: 100,
},
}}
/>
}
label="C++"
sx={{
"& .MuiFormControlLabel-label": {
color: "skyblue",
fontSize: 60,
},
}}
/>
<FormControlLabel
control={
<Checkbox
sx={{
"& .MuiSvgIcon-root": {
fill: "lightgreen",
fontSize: 100,
},
}}
/>
}
label="Python"
sx={{
"& .MuiFormControlLabel-label": {
color: "lightgreen",
fontSize: 60,
},
}}
/>
<FormControlLabel
control={
<Checkbox
sx={{
"& .MuiSvgIcon-root": {
fill: "violet",
fontSize: 100,
},
}}
/>
}
label="JavaScript"
sx={{
"& .MuiFormControlLabel-label": {
color: "violet",
fontSize: 60,
},
}}
/>
</FormGroup>
</div>
);
}
Output
Example
In this example, we have created a customized checkbox using styledcomponents. The example also uses the FormGroup component to group multiple checkboxes.
import { FormGroup } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import React from "react";
import { styled } from "@mui/system";
const UnCheckedIconCustom = styled("span")(() => ({
width: 32,
height: 32,
borderRadius: 4,
boxShadow: "lightgreen",
backgroundColor: "green",
backgroundImage: "green",
".Mui-focusVisible &": {
outline: "#158802",
outlineOffset: 2,
},
"input:hover ~ &": {
backgroundColor: "#0D5502",
},
}));
const CheckedIconCustom = styled(UnCheckedIconCustom)({
backgroundColor: "green",
"&:before": {
width: 32,
height: 32,
display: "block",
backgroundImage:
"url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E")",
content: '""',
},
"input:hover ~ &": {
backgroundColor: "#0D5502",
},
});
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<Checkbox
sx={{
"&:hover": { bgcolor: "transparent" },
}}
checkedIcon={<CheckedIconCustom />}
icon={<UnCheckedIconCustom />}
disableRipple
/>
<Checkbox
sx={{
"&:hover": { bgcolor: "transparent" },
}}
checkedIcon={<CheckedIconCustom />}
icon={<UnCheckedIconCustom />}
disableRipple
/>
</FormGroup>
</div>
);
}
Output
Example
For this illustration we've designed a checkbox using styled components and added custom labels. The example also demonstrates how to use the FormGroup component for grouping checkboxes.
import { FormControlLabel, FormGroup } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import React from "react";
import { styled } from "@mui/system";
const UnCheckedIconCustom = styled("span")(() => ({
width: 32,
height: 32,
borderRadius: 4,
boxShadow: "lightgreen",
backgroundColor: "green",
backgroundImage: "green",
".Mui-focusVisible &": {
outline: "#158802",
outlineOffset: 2,
},
"input:hover ~ &": {
backgroundColor: "#0D5502",
},
}));
const CheckedIconCustom = styled(UnCheckedIconCustom)({
backgroundColor: "green",
"&:before": {
width: 32,
height: 32,
display: "block",
backgroundImage:
"url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E")",
content: '""',
},
"input:hover ~ &": {
backgroundColor: "#0D5502",
},
});
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<FormControlLabel
label="Custom styled checkbox"
control={
<Checkbox
sx={{
"&:hover": { bgcolor: "transparent" },
}}
checkedIcon={<CheckedIconCustom />}
icon={<UnCheckedIconCustom />}
disableRipple
/>
}
sx={{
"& .MuiFormControlLabel-label": {
color: "green",
fontSize: 30,
},
}}
/>
</FormGroup>
</div>
);
}
Output
Conclusion
Material UI provides a range of options, for customizing checkboxes giving you the ability to personalize their style to match the needs and design preferences of your application. In this article, we learned the complete steps to customize the checkboxes and saw the examples with different approaches like styledcomponents, etc. Through CSS, in JS and customizations of checkbox appearance and icons you can create checkboxes that seamlessly integrate with your UI. Try out styles, colors and icons to achieve a checkbox design that enhances the look and feel of your application.
439 Views
