Material UI — Buttons and Checkboxes

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add buttons and checkboxes Material Design.

Disabled Elevation

We can disable the elevation of buttons with the disableElevation prop.

For instance, we can write:

import React from "react";
import Button from "@material-ui/core/Button";
import ButtonGroup from "@material-ui/core/ButtonGroup";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <ButtonGroup disableElevation variant="contained" color="primary">
        <Button>foo</Button>
        <Button>bar</Button>
      </ButtonGroup>
    </div>
  );
}

to disable the elevation.

Checkbox

Checkboxes let us turn options on or off.

To create one, we can use the Checkbox component:

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";

export default function App() {
  const [checked, setChecked] = React.useState(true);

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div>
      <Checkbox
        checked={checked}
        onChange={handleChange}
        inputProps={{ "aria-label": "checkbox" }}
      />
    </div>
  );
}

We add the Checkbox component to add a checkbox.

It takes the checked prop to set the checked value.

onChange takes the checked value so that we can set the state.

And inputProps let us add attributes to the checkbox.

Checkbox with FormControlLabel

We can add a label to our checkbox with the FormControlLabel .

For instance, we can write:

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";

export default function App() {
  const [checked, setChecked] = React.useState(true);

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div>
      <FormControlLabel
        control={
          <Checkbox
            checked={checked}
            onChange={handleChange}
            name="checked"
            color="primary"
          />
        }
        label="Primary"
      />
    </div>
  );
}

to create a checkbox with a label beside it.

We wrap the FormControlLabel outside our Checkbox so that’s we can add a label to it with the label prop.

Checkboxes with FormGroup

To add multiple checkboxes, we can put them into a FormGroup .

For instance, we can write:

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormHelperText from "@material-ui/core/FormHelperText";

export default function App() {
  const [checked, setChecked] = React.useState({
    foo: true,
    bar: false
  });

const handleChange = event => {
    setChecked({ ...checked, [event.target.name]: event.target.checked });
  };

return (
    <div>
      <FormControl component="fieldset">
        <FormLabel component="legend">check them all</FormLabel>
        <FormGroup>
          <FormControlLabel
            control={
              <Checkbox
                checked={checked.foo}
                onChange={handleChange}
                name="foo"
              />
            }
            label="foo"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={checked.bar}
                onChange={handleChange}
                name="bar"
              />
            }
            label="bar"
          />
        </FormGroup>
        <FormHelperText>Be careful</FormHelperText>
      </FormControl>
    </div>
  );
}

To create a group of checkb0oxes with the FormControl component.

We wrapped lots of things inside it.

We have a FormLabel to display the label at the top.

Then we have a FormGroup to hold tge checkboxes.

The FormControlLabel has the label for each checkbox.

FormHelperText has the small text we display at the bottom of the form.

Label Placement

The label placement can be changed.

To do that, we can use the labelPlacement prop to change it.

For instance, we can write:

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";

export default function App() {
  return (
    <div>
      <FormControlLabel
        value="bottom"
        control={<Checkbox color="primary" />}
        label="Bottom"
        labelPlacement="bottom"
      />
    </div>
  );
}

Now we have the label below the checkbox.

Other possible values include top , start , and end .

Customized Checkbox

We can apply our own styles to the checkbox.

For instance, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import clsx from "clsx";
import Checkbox from "@material-ui/core/Checkbox";

const useStyles = makeStyles({
  root: {
    "&:hover": {
      backgroundColor: "transparent"
    }
  },
  icon: {
    borderRadius: 3,
    width: 16,
    height: 16,
    backgroundColor: "#ebf1f5",
    "input:hover ~ &": {
      backgroundColor: "#ebf1f5"
    },
    "input:disabled ~ &": {
      boxShadow: "none"
    }
  },
  checkedIcon: {
    backgroundColor: "#137cbd",
    backgroundImage: "blue",
    "&:before": {
      display: "block",
      width: 16,
      height: 16,
      backgroundColor: "gray"
    },
    "input:hover ~ &": {
      backgroundColor: "#106ba3"
    }
  }
});

export default function App() {
  const classes = useStyles();

  return (
    <Checkbox
      className={classes.root}
      disableRipple
      color="default"
      checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
      icon={<span className={classes.icon} />}
      inputProps={{ "aria-label": "decorative checkbox" }}
    />
  );
}

to create a checkbox without a checkmark.

We set a grayish color for the unchecked state.

And we set the checked state to blue.

These are done according to the styles we passed into makeStyles .

Also, we used the clsx package to toggle between the checked and unchecked styles.

Conclusion

We can add checkboxes with Material UI.

Also, we can add labels and style them the way we want.