🐛(react) fix props not recognized on the input element

The props propagation was adding unknown props to the input element,
which was causing an error warning to be displayed in the console.

packages/react/src/components/Forms/Checkbox/index.spec.tsx

@@ -1,9 +1,20 @@
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import { Checkbox, CheckboxGroup } from ":/components/Forms/Checkbox/index";
+import { FieldProps } from "../Field";
+import {
+  Checkbox,
+  CheckboxGroup,
+  CheckboxOnlyProps,
+} from ":/components/Forms/Checkbox/index";
+
+const spyError = vi.spyOn(global.console, "error");
 
 describe("<Checkbox/>", () => {
+  afterAll(() => {
+    spyError.mockRestore();
+  });
+
   it("renders and can be checked", async () => {
     const user = userEvent.setup();
     render(<Checkbox label="Agree" />);
@@ -106,4 +117,21 @@ describe("<Checkbox/>", () => {
       document.querySelector(".c__checkbox__group.c__field.c__field--error"),
     ).toBeInTheDocument();
   });
+
+  it("checks the props doesn't create error warning", async () => {
+    const propsInput: Required<FieldProps & CheckboxOnlyProps> = {
+      label: "First name",
+      fullWidth: true,
+      className: "c__field--full-width",
+      compact: false,
+      state: "default",
+      text: "my text",
+      textItems: ["my text item 1", "my text item 2"],
+      rightText: "my right text",
+      indeterminate: true,
+    };
+
+    render(<Checkbox {...propsInput} />);
+    expect(spyError).not.toHaveBeenCalled();
+  });
 });

packages/react/src/components/Forms/Checkbox/index.tsx

@@ -9,11 +9,14 @@ import React, {
 import classNames from "classnames";
 import { Field, FieldProps } from ":/components/Forms/Field";
 
+export type CheckboxOnlyProps = {
+  indeterminate?: boolean;
+  label?: string;
+};
+
 export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> &
-  FieldProps & {
-    indeterminate?: boolean;
-    label?: string;
-  };
+  FieldProps &
+  CheckboxOnlyProps;
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (
@@ -33,6 +36,16 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       }
     }, [indeterminate]);
 
+    const {
+      compact,
+      fullWidth,
+      rightText,
+      state,
+      text,
+      textItems,
+      ...inputProps
+    } = props;
+
     return (
       <label
         className={classNames("c__checkbox", {
@@ -46,7 +59,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               <input
                 type="checkbox"
                 className={className}
-                {...props}
+                {...inputProps}
                 onChange={(e) => {
                   setValue(e.target.checked);
                   props.onChange?.(e);