how to change mui checkbox border radius in react js?
December 16, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To change mui checkbox border radius in React js, set checkedIcon={<CheckCircleIcon />}. It will change mui checkbox border radius.
Today, I am going to show you, how to change mui checkbox border radius in react js.
Installation
Install the following packages to use mui checkbox border radiusin react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledMUI material change mui checkbox border radius example.
The below code is an example of changing mui checkbox border radius using mui.
App.js
import * as React from 'react';
import MuiCheckbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { Stack } from '@mui/material';
function Checkbox({ label, icon, checkedIcon }) {
return (
<FormControlLabel
label={label}
control={
<MuiCheckbox defaultChecked icon={icon} checkedIcon={checkedIcon} />
}
/>
);
}
export default function Checkboxes() {
return (
<Stack>
<Checkbox
label="CheckCircleIcon"
icon={<RadioButtonUncheckedIcon />}
checkedIcon={<CheckCircleIcon />}
/>
</Stack>
);
}In the above code example, I have used the @mui/material component and changed mui checkbox border radius.
Check the output of the above code example.
All the best 👍