frontPanel/src/ui_kit/CustomCheckbox.tsx

import { FormControlLabel, Checkbox, useTheme, Box } from "@mui/material";
import React from "react";

import type { SxProps } from "@mui/material";

interface Props {
  label: string;
  handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  checked?: boolean;
  sx?: SxProps;
}

export default function CustomCheckbox({ label, handleChange, checked, sx }: Props) {
  const theme = useTheme();

  return (
    <FormControlLabel
      control={<Checkbox icon={<Icon />} checkedIcon={<CheckedIcon />} onChange={handleChange} checked={checked} />}
      label={label}
      sx={{
        color: theme.palette.grey2.main,
        ml: "-9px",
        userSelect: "none",
        ...sx,
      }}
    />
  );
}

function Icon() {
  const theme = useTheme();

  return (
    <Box
      sx={{
        height: "26px",
        width: "26px",
        borderRadius: "8px",
        backgroundColor: theme.palette.background.default,
        border: `1px solid ${theme.palette.grey2.main}`,
      }}
    />
  );
}

function CheckedIcon() {
  const theme = useTheme();

  return (
    <Box
      sx={{
        height: "26px",
        width: "26px",
        borderRadius: "8px",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: theme.palette.brightPurple.main,
        border: `1px solid ${theme.palette.grey2.main}`,
      }}
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 18" fill="none">
        <path d="M2 9L10 16.5L22.5 1.5" stroke="#ffffff" strokeWidth="4" strokeLinecap="round" />
      </svg>
    </Box>
  );
}