From 2b34e4748b89aa7963dbf94588d91960f5b864e9 Mon Sep 17 00:00:00 2001
From: Drikus Roor <drikusroor@gmail.com>
Date: Thu, 2 Jan 2025 09:58:00 +0100
Subject: [PATCH] feat: add Checkbox component for enhanced form functionality

---
 .../src/components/form/Checkbox.tsx          | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 backend/experiment/templates/form/experiment-form/src/components/form/Checkbox.tsx

diff --git a/backend/experiment/templates/form/experiment-form/src/components/form/Checkbox.tsx b/backend/experiment/templates/form/experiment-form/src/components/form/Checkbox.tsx
new file mode 100644
index 000000000..fa6d789f1
--- /dev/null
+++ b/backend/experiment/templates/form/experiment-form/src/components/form/Checkbox.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({ className = '', label, ...props }) => {
+  return (
+    <label className="inline-flex items-center">
+      <input
+        type="checkbox"
+        {...props}
+        className={`
+          w-4 h-4 text-blue-600 rounded
+          border-gray-300 shadow-sm
+          focus:border-blue-500 focus:ring-2 focus:ring-blue-200 focus:ring-opacity-50
+          disabled:bg-gray-100 disabled:cursor-not-allowed
+          ${className}
+        `}
+      />
+      {label && <span className="ml-2 text-gray-700">{label}</span>}
+    </label>
+  );
+};