fix(Field): Fix Checkbox is not reacting to Form defaultValue bug

packages/components/src/integrations/react-hook-form/components/Field/Field.test.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/components/Button";
 import { Label } from "@/components/Label";
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import { Switch } from "@/components/Switch";
+import Checkbox from "@/components/Checkbox";
 
 const handleSubmit = vitest.fn();
 
@@ -91,3 +92,36 @@ describe("Switch field", () => {
     );
   });
 });
+
+describe("Checkbox field", () => {
+  interface FormValues {
+    isActive: boolean;
+  }
+
+  const TestForm = () => {
+    const form = useForm<FormValues>({
+      defaultValues: {
+        isActive: true,
+      },
+    });
+
+    const Field = typedField(form);
+
+    return (
+      <Form form={form} onSubmit={(values) => handleSubmit(values)}>
+        <Field name="isActive">
+          <Checkbox data-testid="checkbox" />
+        </Field>
+        <Button type="submit">Submit</Button>
+      </Form>
+    );
+  };
+
+  test("switch uses default value", async () => {
+    render(<TestForm />);
+
+    expect(screen.getByTestId("checkbox").getAttribute("data-selected")).toBe(
+      "true",
+    );
+  });
+});

packages/components/src/integrations/react-hook-form/components/Field/Field.tsx

@@ -46,7 +46,10 @@ export function Field<T extends FieldValues>(props: Props<T>) {
         };
 
         const propsContext: PropsContext = {
-          Checkbox: formControlProps,
+          Checkbox: {
+            ...formControlProps,
+            isSelected: formControlProps.value,
+          },
           CheckboxGroup: formControlProps,
           CheckboxButton: formControlProps,
           FileField: formControlProps,

packages/components/src/integrations/react-hook-form/components/Field/stories/Default.stories.tsx

@@ -56,6 +56,7 @@ const meta: Meta<typeof Field> = {
         lastName: "",
         gender: "",
         storage: 200,
+        interests: ["foo"],
         testing: true,
       },
     });