add checkbox component to experimental forms

lib/experimental/Forms/Fields/Checkbox/index.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Checkbox from "."
+
+const meta = {
+  component: Checkbox,
+  tags: ["autodocs"],
+  args: {},
+} satisfies Meta<typeof Checkbox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: "Checkbox",
+  },
+}

lib/experimental/Forms/Fields/Checkbox/index.tsx

@@ -0,0 +1,12 @@
+import { Checkbox as ShadcnInput } from "@/ui/checkbox"
+
+type CheckboxProps = Omit<
+  React.ComponentPropsWithoutRef<typeof ShadcnInput>,
+  "asChild"
+> & {
+  title?: string
+}
+
+const Checkbox: React.FC<CheckboxProps> = ShadcnInput
+
+export default Checkbox

lib/ui/checkbox.tsx

@@ -7,22 +7,31 @@ const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary peer h-4 w-4 shrink-0 rounded-2xs border disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-f1-foreground",
-      focusRing(),
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
+  <div className="flex items-center gap-4">
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(
+        "ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary peer h-4 w-4 shrink-0 rounded-2xs border-2 border-solid border-f1-border disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-f1-foreground",
+        focusRing(),
+        className
+      )}
+      {...props}
     >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
+      <CheckboxPrimitive.Indicator
+        className={cn("flex items-center justify-center text-current")}
+      >
+        <Check className="h-3 w-3" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+    {props.title && (
+      <label className={cn("flex items-center justify-center text-current")}>
+        {props.title}
+      </label>
+    )}
+  </div>
 ))
 Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
-export { Checkbox }
+const CheckboxRoot = CheckboxPrimitive.Root
+
+export { Checkbox, CheckboxRoot }