fix(checkbox): pass form prop to checkbox

Author: smozely

.changeset/smart-cats-walk.md

@@ -0,0 +1,5 @@
+---
+"@heroui/checkbox": patch
+---
+
+Pass form prop to checkbox

packages/components/checkbox/__tests__/checkbox.test.tsx

@@ -143,6 +143,16 @@ describe("Checkbox", () => {
     expect(onChange).toHaveBeenCalled();
   });
 
+  it('should work correctly with "form" prop', () => {
+    const wrapper = render(
+      <Checkbox data-testid="checkbox-test" form="test-form-id">
+        Option
+      </Checkbox>,
+    );
+
+    expect(wrapper.container.querySelector("input")).toHaveAttribute("form", "test-form-id");
+  });
+
   describe("validation", () => {
     describe("validationBehavior=native", () => {
       it("supports isRequired", async () => {

packages/components/checkbox/src/use-checkbox.ts

@@ -312,8 +312,9 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
       ...mergeProps(inputProps, focusProps),
       className: slots.hiddenInput({class: classNames?.hiddenInput}),
       onChange: chain(inputProps.onChange, handleCheckboxChange),
+      ...(otherProps.form ? {form: otherProps.form} : {}),
     };
-  }, [inputProps, focusProps, handleCheckboxChange, classNames?.hiddenInput]);
+  }, [inputProps, focusProps, handleCheckboxChange, classNames?.hiddenInput, otherProps]);
 
   const getLabelProps: PropGetter = useCallback(
     () => ({