✨(react) react-hook-form Checkbox example

Our form elements needs to be usable with react-hook-form

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

@@ -85,6 +85,15 @@ You can also define `state`, `text` props on the group component
   <Story id="components-forms-checkbox--group-success"/>
 </Canvas>
 
+## Usage with react-hook-form
+
+You can use this input with [react-hook-form](https://react-hook-form.com/docs)
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-checkbox--react-hook-form"/>
+</Canvas>
+
+
 ### Props
 
 <ArgTypes of={Checkbox} />

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

@@ -1,6 +1,15 @@
-import { Meta, StoryFn } from "@storybook/react";
 import React from "react";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Meta, StoryFn } from "@storybook/react";
+import { useForm } from "react-hook-form";
+import * as Yup from "yup";
 import { Checkbox, CheckboxGroup } from ":/components/Forms/Checkbox/index";
+import { Button } from ":/components/Button";
+import {
+  getFieldState,
+  getFieldErrorMessage,
+  onSubmit,
+} from ":/tests/reactHookFormUtils";
 
 export default {
   title: "Components/Forms/Checkbox",
@@ -138,3 +147,46 @@ export const GroupSuccess = () => (
     </CheckboxGroup>
   </div>
 );
+
+export const ReactHookForm = () => {
+  interface CheckboxExampleFormValues {
+    terms: boolean;
+  }
+
+  const checkboxExampleSchema = Yup.object().shape({
+    terms: Yup.boolean()
+      .required()
+      .oneOf([true], "You have to accept the terms of use"),
+  });
+
+  const { register, handleSubmit, formState } =
+    useForm<CheckboxExampleFormValues>({
+      defaultValues: {
+        terms: false,
+      },
+      mode: "onChange",
+      reValidateMode: "onChange",
+      resolver: yupResolver(checkboxExampleSchema),
+    });
+
+  return (
+    <form
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        width: "400px",
+      }}
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <Checkbox
+        label="I accept the terms of use"
+        fullWidth
+        state={getFieldState("terms", formState)}
+        text={getFieldErrorMessage("terms", formState)}
+        {...register("terms")}
+      />
+      <Button fullWidth={true}>Log-in</Button>
+    </form>
+  );
+};

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

@@ -1,6 +1,7 @@
 import React, {
   InputHTMLAttributes,
   PropsWithChildren,
+  forwardRef,
   useEffect,
   useRef,
   useState,
@@ -14,7 +15,9 @@ type Props = InputHTMLAttributes<HTMLInputElement> &
     label?: string;
   };
 
-export const Checkbox = ({
+export const Checkbox = forwardRef<HTMLInputElement, Props>(
+  (
+    {
       indeterminate,
       className = "",
       checked,
@@ -23,8 +26,10 @@ export const Checkbox = ({
       rightText,
       state,
       ...props
-}: Props) => {
+    }: Props,
-  const inputRef = useRef<HTMLInputElement>(null);
+    ref,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>();
     const [value, setValue] = useState<boolean>(!!checked);
 
     useEffect(() => {
@@ -49,10 +54,18 @@ export const Checkbox = ({
               <input
                 type="checkbox"
                 className={className}
-              onChange={(e) => setValue(e.target.checked)}
                 {...props}
+                onChange={(e) => {
+                  setValue(e.target.checked);
+                  props.onChange?.(e);
+                }}
                 checked={value}
-              ref={inputRef}
+                ref={(checkboxRef) => {
+                  if (typeof ref === "function") {
+                    ref(checkboxRef);
+                  }
+                  inputRef.current = checkboxRef || undefined;
+                }}
               />
               <Indeterminate />
               <Checkmark />
@@ -62,7 +75,8 @@ export const Checkbox = ({
         </Field>
       </label>
     );
-};
+  },
+);
 
 export const CheckboxGroup = ({
   children,