message: Checkbox: add ripple
diff: @@ -4,6 +4,7 @@ import { Field } from "formik";
  import {
  makeStyles,
  createStyles,
  + ButtonBase,
  FormControlLabel,
  SwitchProps as MuiSwitchProps,
  } from "@material-ui/core";
  @@ -12,16 +13,23 @@ import ErrorMessage from "../ErrorMessage";
  const useStyles = makeStyles(theme =>
  createStyles({
  - root: {
  + buttonBase: {
  + borderRadius: theme.shape.borderRadius,
  backgroundColor:
  theme.palette.type === "light"
  ? "rgba(0, 0, 0, 0.09)"
  : "rgba(255, 255, 255, 0.09)",
  - borderRadius: theme.shape.borderRadius,
  padding: theme.spacing(9 / 8, 1, 9 / 8, 1.5),
  + width: "100%",
  + display: "flex",
  + textAlign: "left",
  + },
  +
  + formControlLabel: {
  margin: 0,
  width: "100%",
  + display: "flex",
  },
  label: {
  @@ -41,6 +49,7 @@ export default function Checkbox({ label, ...props }: ICheckboxProps) {
  return (
  <>
  + <ButtonBase className={classes.buttonBase}>
  <FormControlLabel
  control={
  <Field
  @@ -52,8 +61,9 @@ export default function Checkbox({ label, ...props }: ICheckboxProps) {
  }
  label={label}
  labelPlacement="start"
  - classes={classes}
  + classes={{ root: classes.formControlLabel, label: classes.label }}
  />
  + </ButtonBase>
  <ErrorMessage name={props.name} />
  </>
  