diff --git a/.changeset/smart-cats-walk.md b/.changeset/smart-cats-walk.md new file mode 100644 index 0000000000..3ee382c1e1 --- /dev/null +++ b/.changeset/smart-cats-walk.md @@ -0,0 +1,5 @@ +--- +"@heroui/checkbox": patch +--- + +Pass form prop to checkbox diff --git a/packages/components/checkbox/__tests__/checkbox.test.tsx b/packages/components/checkbox/__tests__/checkbox.test.tsx index 70463f3032..27c2b48203 100644 --- a/packages/components/checkbox/__tests__/checkbox.test.tsx +++ b/packages/components/checkbox/__tests__/checkbox.test.tsx @@ -146,6 +146,16 @@ describe("Checkbox", () => { expect(onChange).toHaveBeenCalled(); }); + it('should work correctly with "form" prop', () => { + const wrapper = render( + + Option + , + ); + + expect(wrapper.container.querySelector("input")).toHaveAttribute("form", "test-form-id"); + }); + describe("validation", () => { describe("validationBehavior=native", () => { it("supports isRequired", async () => { diff --git a/packages/components/checkbox/src/use-checkbox.ts b/packages/components/checkbox/src/use-checkbox.ts index 3b0b48d583..ae58e50b1f 100644 --- a/packages/components/checkbox/src/use-checkbox.ts +++ b/packages/components/checkbox/src/use-checkbox.ts @@ -320,8 +320,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( () => ({