Nextjs Check Radio Switch

Pro Component

We haven’t extended these components from Material-UI. We’ve just added our style over their components.

Style FREE

To use our styles over any of these three components you need the following import:

import styles from "assets/jss/nextjs-material-dashboard-pro/checkboxAdnRadioStyle.js";

Style PRO

To use our styles over any of these three components you need the following import:

import styles from "assets/jss/nextjs-material-dashboard-pro/customCheckboxRadioSwitch.js";

Let’s take a look at each one of them, and how to use our styles.

Example

Checkboxes

Unchecked

Disabled Unchecked

Disabled Checked

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 "assets/jss/nextjs-material-dashboard-pro/customCheckboxRadioSwitch.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();
  const checkboxClasses = {
    checked: classes.checked,
    root: classes.checkRoot
  };
  const labelClasses = { label: classes.label };
  const disabledLabelClasses = {
    label: classes.label,
    disabled: classes.disabledCheckboxAndRadio
  };
  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={checkboxClasses}
            />
          }
          classes={labelClasses}
          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={checkboxClasses}
            />
          }
          classes={labelClasses}
          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={checkboxClasses}
            />
          }
          classes={disabledLabelClasses}
          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={checkboxClasses}
            />
          }
          classes={disabledLabelClasses}
          label="Disabled Checked"
        />
      </div>
    </div>
  );
}

Radios

First Radio

Second Radio

Disabled Unchecked Radio

Disabled Checked Radio

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 "assets/jss/nextjs-material-dashboard-pro/customCheckboxRadioSwitch.js";

const useStyles = makeStyles(styles);

export default function RadioExample() {
  const [selectedEnabled, setSelectedEnabled] = React.useState("b");
  const classes = useStyles();
  const radioClasses = {
    checked: classes.radio,
    root: classes.radioRoot
  };
  const disabledRadioClasses = {
    checked: classes.radio,
    disabled: classes.disabledCheckboxAndRadio,
    root: classes.radioRoot
  };
  const labelClasses = { label: classes.label };
  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={radioClasses}
            />
          }
          classes={labelClasses}
          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={radioClasses}
            />
          }
          classes={labelClasses}
          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={disabledRadioClasses}
            />
          }
          classes={labelClasses}
          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={disabledRadioClasses}
            />
          }
          classes={labelClasses}
          label="Disabled Checked Radio"
        />
      </div>
    </div>
  );
}

Switches pro

Toggle is on

Toggle is off

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 "assets/jss/nextjs-material-dashboard-pro/customCheckboxRadioSwitch.js";

const useStyles = makeStyles(styles);

export default function SwitchExample() {
  const [checkedA, setCheckedA] = React.useState(true);
  const [checkedB, setCheckedB] = React.useState(false);
  const classes = useStyles();
  const labelClasses = { label: classes.label };
  const switchClasses = {
    switchBase: classes.switchBase,
    checked: classes.switchChecked,
    thumb: classes.switchIcon,
    track: classes.switchBar
  };
  return (
    <div>
      <div>
        <FormControlLabel
          control={
            <Switch
              checked={checkedA}
              onChange={event => setCheckedA(event.target.checked)}
              value="checkedA"
              classes={switchClasses}
            />
          }
          classes={labelClasses}
          label="Toggle is on"
        />
      </div>
      <div>
        <FormControlLabel
          control={
            <Switch
              checked={checkedB}
              onChange={event => setCheckedB(event.target.checked)}
              value="checkedB"
              classes={switchClasses}
            />
          }
          classes={labelClasses}
          label="Toggle is off"
        />
      </div>
    </div>
  );
}

Props

You should also check the following props from the base Material-UI components: