first commit

components/ui/Checkbox.tsx

@@ -0,0 +1,36 @@
+"use client";
+import React, { forwardRef } from "react";
+
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  error?: string;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ label, error, className = "", ...props }, ref) => {
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="flex items-start gap-3">
+          <input
+            type="checkbox"
+            ref={ref}
+            className={`
+              mt-1 w-4 h-4 rounded border-crisp text-ocean 
+              focus:ring-ocean focus:ring-offset-0 cursor-pointer
+              ${className}
+            `}
+            {...props}
+          />
+          <label className="text-[13px] text-navy/60 font-medium leading-tight cursor-pointer">
+            {label}
+          </label>
+        </div>
+        {error && (
+          <span className="text-red-500 text-xs font-bold">{error}</span>
+        )}
+      </div>
+    );
+  }
+);
+
+Checkbox.displayName = "Checkbox";