✨(react) react-hook-form Switch example

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

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

@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes } from "react";
+import React, { InputHTMLAttributes, forwardRef } from "react";
 import classNames from "classnames";
 import { Field, FieldProps } from ":/components/Forms/Field";
 
@@ -8,36 +8,33 @@ type Props = InputHTMLAttributes<HTMLInputElement> &
     labelSide?: "left" | "right";
   };
 
-export const Switch = ({
-  label,
-  text,
-  state,
-  fullWidth,
-  labelSide = "left",
-
-  ...props
-}: Props) => {
-  return (
-    <label
-      className={classNames(
-        "c__checkbox",
-        "c__switch",
-        "c__switch--" + labelSide,
-        {
-          "c__checkbox--disabled": props.disabled,
-          "c__switch--full-width": fullWidth,
-        },
-      )}
-    >
-      <Field text={text} compact={true} state={state} fullWidth={fullWidth}>
-        <div className="c__checkbox__container">
-          {label && <div className="c__checkbox__label">{label}</div>}
-          <div className="c__switch__rail__wrapper">
-            <input type="checkbox" {...props} />
-            <div className="c__switch__rail" />
+export const Switch = forwardRef<HTMLInputElement, Props>(
+  (
+    { label, text, state, fullWidth, labelSide = "left", ...props }: Props,
+    ref,
+  ) => {
+    return (
+      <label
+        className={classNames(
+          "c__checkbox",
+          "c__switch",
+          "c__switch--" + labelSide,
+          {
+            "c__checkbox--disabled": props.disabled,
+            "c__switch--full-width": fullWidth,
+          },
+        )}
+      >
+        <Field text={text} compact={true} state={state} fullWidth={fullWidth}>
+          <div className="c__checkbox__container">
+            {label && <div className="c__checkbox__label">{label}</div>}
+            <div className="c__switch__rail__wrapper">
+              <input type="checkbox" {...props} ref={ref} />
+              <div className="c__switch__rail" />
+            </div>
           </div>
-        </div>
-      </Field>
-    </label>
-  );
-};
+        </Field>
+      </label>
+    );
+  },
+);