We haven't extended checkboxes radios and switches. We've just added our style over their components.
To use our styles over any of these three components you need the following import:
import styles from "styles/jss/nextjs-material-kit-pro/customCheckboxRadioSwitchStyle.js";Let's take a look at each one of them, and how to use our styles.
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
// @material-ui/icons
import Check from "@material-ui/icons/Check";
// core components
import styles from "styles/jss/nextjs-material-kit-pro/customCheckboxRadioSwitchStyle.js";
const useStyles = makeStyles(styles);
export default function CheckboxExample() {
const [checked, setChecked] = React.useState([24, 22]);
const handleToggle = value => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
const classes = useStyles();
return (
<div>
<div
className={
classes.checkboxAndRadio + " " + classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(21)}
checkedIcon={<Check className={classes.checkedIcon} />}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{ label: classes.label }}
label="Unchecked"
/>
</div>
<div
className={
classes.checkboxAndRadio + " " + classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(22)}
checked={checked.indexOf(22) !== -1 ? true : false}
checkedIcon={<Check className={classes.checkedIcon} />}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{ label: classes.label }}
label="Checked"
/>
</div>
<div
className={
classes.checkboxAndRadio + " " + classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
disabled
control={
<Checkbox
tabIndex={-1}
checkedIcon={<Check className={classes.checkedIcon} />}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
disabled: classes.disabledCheckboxAndRadio
}}
label="Disabled Unchecked"
/>
</div>
<div
className={
classes.checkboxAndRadio + " " + classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
disabled
control={
<Checkbox
tabIndex={-1}
checked={checked.indexOf(24) !== -1 ? true : false}
checkedIcon={<Check className={classes.checkedIcon} />}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
disabled: classes.disabledCheckboxAndRadio
}}
label="Disabled Checked"
/>
</div>
</div>
);
}import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Radio from "@material-ui/core/Radio";
import FormControlLabel from "@material-ui/core/FormControlLabel";
// @material-ui/icons
import FiberManualRecord from "@material-ui/icons/FiberManualRecord";
// core components
import styles from "styles/jss/nextjs-material-kit-pro/customCheckboxRadioSwitchStyle.js";
const useStyles = makeStyles(styles);
export default function RadioExample() {
const [selectedEnabled, setSelectedEnabled] = React.useState("b");
const classes = useStyles();
return (
<div>
<div
className={
classes.checkboxAndRadio + " " + classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Radio
checked={selectedEnabled === "a"}
onChange={() => setSelectedEnabled("a")}
value="a"
name="radio button enabled"
aria-label="A"
icon={<FiberManualRecord className={classes.radioUnchecked} />}
checkedIcon={
<FiberManualRecord className={classes.radioChecked} />
}
classes={{
checked: classes.radio,
root: classes.radioRoot
}}
/>
}
classes={{
label: classes.label
}}
label="First Radio"
/>
</div>
<div
className={
classes.checkboxAndRadio + " " + classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Radio
checked={selectedEnabled === "b"}
onChange={() => setSelectedEnabled("b")}
value="b"
name="radio button enabled"
aria-label="B"
icon={<FiberManualRecord className={classes.radioUnchecked} />}
checkedIcon={
<FiberManualRecord className={classes.radioChecked} />
}
classes={{
checked: classes.radio,
root: classes.radioRoot
}}
/>
}
classes={{
label: classes.label
}}
label="Second Radio"
/>
</div>
<div
className={
classes.checkboxAndRadio + " " + classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
disabled
control={
<Radio
checked={false}
value="a"
name="radio button disabled"
aria-label="B"
icon={<FiberManualRecord className={classes.radioUnchecked} />}
checkedIcon={
<FiberManualRecord className={classes.radioChecked} />
}
classes={{
checked: classes.radio,
disabled: classes.disabledCheckboxAndRadio,
root: classes.radioRoot
}}
/>
}
classes={{
label: classes.label
}}
label="Disabled Unchecked Radio"
/>
</div>
<div
className={
classes.checkboxAndRadio + " " + classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
disabled
control={
<Radio
checked={true}
value="b"
name="radio button disabled"
aria-label="B"
icon={<FiberManualRecord className={classes.radioUnchecked} />}
checkedIcon={
<FiberManualRecord className={classes.radioChecked} />
}
classes={{
checked: classes.radio,
disabled: classes.disabledCheckboxAndRadio,
root: classes.radioRoot
}}
/>
}
classes={{ label: classes.label }}
label="Disabled Checked Radio"
/>
</div>
</div>
);
}import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Switch from "@material-ui/core/Switch";
import FormControlLabel from "@material-ui/core/FormControlLabel";
// core components
import styles from "styles/jss/nextjs-material-kit-pro/customCheckboxRadioSwitchStyle.js";
const useStyles = makeStyles(styles);
export default function SwitchExample() {
const [checkedA, setCheckedA] = React.useState(true);
const [checkedB, setCheckedB] = React.useState(false);
const classes = useStyles();
return (
<div>
<div>
<FormControlLabel
control={
<Switch
checked={checkedA}
onChange={event => setCheckedA(event.target.checked)}
value="checkedA"
classes={{
switchBase: classes.switchBase,
checked: classes.switchChecked,
thumb: classes.switchIcon,
track: classes.switchBar
}}
/>
}
classes={{
label: classes.label
}}
label="Toggle is on"
/>
</div>
<div>
<FormControlLabel
control={
<Switch
checked={checkedB}
onChange={event => setCheckedB(event.target.checked)}
value="checkedB"
classes={{
switchBase: classes.switchBase,
checked: classes.switchChecked,
thumb: classes.switchIcon,
track: classes.switchBar
}}
/>
}
classes={{
label: classes.label
}}
label="Toggle is off"
/>
</div>
</div>
);
}For more info you can check out these links which will redirect you to the official Material-ui documentation: Checkbox, Radio, Switch.