A checkbox with a label

src/components/Checkbox.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+type CheckBoxProps = {
+  /**
+   * here any text can be written to be a label for the checkbox
+   */
+  label: string;
+  /**
+   * onChange callback
+   */
+  onChange?: (value: boolean) => void;
+} & Omit<React.HTMLProps<HTMLInputElement>, "onChange" | "type">;
+
+const CheckBox = ({ className, onChange, label, ...props }: CheckBoxProps) => {
+  return (
+    <div className="d-flex align-center">
+      <input
+        onChange={() => onChange && onChange(!props.checked)}
+        className="hover:bg-sky-700 focus:bg-sky-900 active:bg-sky-300 text-black"
+        type="checkbox"
+        {...props}
+      />
+      <label> {label} </label>
+    </div>
+  );
+};
+
+export default CheckBox;