refactor(components): make form components compliant with Eslint rules

1 files changed, 28 insertions, 15 deletions

diff --git a/src/components/molecules/forms/labelled-field/labelled-field.tsx b/src/components/molecules/forms/labelled-field/labelled-field.tsx
index af492b3..ea0bd67 100644
--- a/src/components/molecules/forms/labelled-field/labelled-field.tsx
+++ b/src/components/molecules/forms/labelled-field/labelled-field.tsx
@@ -1,5 +1,10 @@
-import { FC, HTMLAttributes, ReactElement } from 'react';
 import {
+  forwardRef,
+  type HTMLAttributes,
+  type ReactElement,
+  type ForwardRefRenderFunction,
+} from 'react';
+import type {
   CheckboxProps,
   InputProps,
   LabelProps,
@@ -37,27 +42,35 @@ export type LabelledFieldProps = Omit<
   label: ReactElement<LabelProps>;
 };
 
-/**
- * LabelledField component
- *
- * Render a field tied to a label.
- */
-export const LabelledField: FC<LabelledFieldProps> = ({
-  className = '',
-  field,
-  isInline = false,
-  isReversedOrder = false,
-  label,
-  ...props
-}) => {
+const LabelledFieldWithRef: ForwardRefRenderFunction<
+  HTMLDivElement,
+  LabelledFieldProps
+> = (
+  {
+    className = '',
+    field,
+    isInline = false,
+    isReversedOrder = false,
+    label,
+    ...props
+  },
+  ref
+) => {
   const layoutClass = isInline ? 'wrapper--inline' : 'wrapper--stack';
   const orderClass = isReversedOrder ? 'wrapper--reverse' : '';
   const wrapperClass = `${styles.wrapper} ${styles[layoutClass]} ${styles[orderClass]} ${className}`;
 
   return (
-    <div {...props} className={wrapperClass}>
+    <div {...props} className={wrapperClass} ref={ref}>
       {label}
       {field}
     </div>
   );
 };
+
+/**
+ * LabelledField component
+ *
+ * Render a field tied to a label.
+ */
+export const LabelledField = forwardRef(LabelledFieldWithRef);