glide-design-system/src/lib/components/checkbox/Checkbox.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import styles from "./checkbox.module.css";

export const Checkbox = ({
  className,
  style,
  onClick,
  name,
  id,
  disabled,
  value,
  label,
  containerClass,
  containerStyle,
  onChange,
  checked,
  required,
  ...props
}) => {
  const [updateValue, setValue] = useState(value ? value : "");
  const [isChecked, setIsChecked] = useState(checked ? checked : false);
  useEffect(() => {
    setValue(value);
    setIsChecked(checked);
  }, [value, checked]);
  const combinedStyle = {
    ...style,
  };
  const valueHandler = (e) => {
    setIsChecked(!isChecked);
    if (onChange) onChange(e);
  };
  return (
    <label className={`${styles.container}`}>
      <input
        className={`${className ? className : ""}`}
        style={combinedStyle}
        type="checkbox"
        id={id}
        name={name}
        value={updateValue}
        onClick={valueHandler}
        checked={isChecked}
        disabled={disabled}
        onChange={onChange && onChange}
        {...props}
      />
      <span
        className={`${styles.checkmark} ${disabled ? styles.disabled : ""}`}
      ></span>
      <span
        style={{
          fontSize: "16px",
          fontFamily: "Roboto, sans-serif",
          display: "flex",
          alignItems: "center",
          columnGap: "2px",
        }}
      >
        <span style={{ marginTop: "-2px" }}> {label}</span>
        {required && <span style={{ color: "red" }}>*</span>}
      </span>
    </label>
  );
};

Checkbox.propTypes = {
  disabled: PropTypes.bool,
  size: PropTypes.oneOf(["small", "medium", "large"]),
  onClick: PropTypes.func,
  name: PropTypes.string,
  value: PropTypes.string,
};