feat: add checkbox component

Author: jaaydenh

site/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-radio-group": "^1.2.3",

site/pnpm-lock.yaml

@@ -19,6 +19,7 @@ import { Slider } from "./components/ui/slider";
 import ReactJson from 'react-json-view';
 import { RadioGroup, RadioGroupItem } from "./components/ui/radio-group"
 import { Label } from "./components/Label/Label";
+import { Checkbox } from "./components/Checkbox/Checkbox";
 
 export function DynamicForm() {
   const serverAddress = "localhost:8100";
@@ -322,28 +323,49 @@ export function DynamicForm() {
           case "switch":
             return (
               <div key={param.name} className="flex flex-col gap-2 items-center">
-              <div className="flex items-center justify-between gap-2">
-                <label>
-                  {param.display_name || param.name}
-                  {param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
-                </label>
+                <div className="flex items-center justify-between gap-2">
+                  <label>
+                    {param.display_name || param.name}
+                    {param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
+                  </label>
+                </div>
+                {param.description && <div className="text-sm">{param.description}</div>}
+                <Controller
+                  name={param.name}
+                  control={methods.control}
+                  render={({ field }) => (
+                    <div className="w-[300px]">
+                      <Switch 
+                        checked={Boolean(field.value === "true")} 
+                        onCheckedChange={(checked) => field.onChange(checked.toString())} 
+                        disabled={(param.form_type_metadata as { disabled?: boolean })?.disabled} 
+                      />
+                    </div>
+                  )}
+                />
               </div>
-              {param.description && <div className="text-sm">{param.description}</div>}
-              <Controller
-                name={param.name}
-                control={methods.control}
-                render={({ field }) => (
-                  <div className="w-[300px]">
-                    <Switch 
-                      checked={Boolean(field.value === "true")} 
-                      onCheckedChange={(checked) => field.onChange(checked.toString())} 
-                      disabled={(param.form_type_metadata as { disabled?: boolean })?.disabled} 
-                    />
-                  </div>
-                )}
-              />
-            </div>
             )
+            case "checkbox":
+              return (
+                <div key={param.name} className="flex flex-col gap-2 items-center">
+                <div className="flex items-center justify-between gap-2">
+                  <label>
+                    {param.display_name || param.name}
+                    {param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
+                  </label>
+                </div>
+                {param.description && <div className="text-sm">{param.description}</div>}
+                <Controller
+                  name={param.name}
+                  control={methods.control}
+                  render={({ field }) => (
+                    <div className="w-[300px]">
+                      <Checkbox checked={Boolean(field.value === "true")} onCheckedChange={(checked) => field.onChange(checked.toString())} disabled={(param.form_type_metadata as { disabled?: boolean })?.disabled} />
+                    </div>
+                  )}
+                />
+              </div>
+              )
       }
     }
 

site/src/DynamicForm.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "../../utils/cn"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }