3 files changed, 35 insertions, 22 deletions
diff --git a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx
index 1f29830..1d1af70 100644
--- a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx
+++ b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ChangeEvent, useState } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type ChangeEvent, useState, useCallback } from 'react';
 import { Input, Label } from '../../../atoms';
 import { LabelledField } from './labelled-field';
 
@@ -77,9 +77,9 @@ export default {
 const Template: ComponentStory<typeof LabelledField> = ({ ...args }) => {
   const id = 'sunt';
   const [value, setValue] = useState<string>('');
-  const updateValue = (e: ChangeEvent<HTMLInputElement>) => {
+  const updateValue = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
-  };
+  }, []);
 
   return (
     <LabelledField
diff --git a/src/components/molecules/forms/labelled-field/labelled-field.test.tsx b/src/components/molecules/forms/labelled-field/labelled-field.test.tsx
index 8bc7c39..0a91ccd 100644
--- a/src/components/molecules/forms/labelled-field/labelled-field.test.tsx
+++ b/src/components/molecules/forms/labelled-field/labelled-field.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Input, Label } from '../../../atoms';
 import { LabelledField } from './labelled-field';
 
@@ -27,7 +27,7 @@ describe('LabelledField', () => {
         label={<Label htmlFor={id}>{label}</Label>}
       />
     );
-    expect(screen.getByLabelText(label)).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toHaveValue(value);
+    expect(rtlScreen.getByLabelText(label)).toBeInTheDocument();
+    expect(rtlScreen.getByRole('textbox')).toHaveValue(value);
   });
 });
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);