1 files changed, 31 insertions, 18 deletions
diff --git a/src/components/atoms/forms/label/label.tsx b/src/components/atoms/forms/label/label.tsx
index 6692205..bfd1a59 100644
--- a/src/components/atoms/forms/label/label.tsx
+++ b/src/components/atoms/forms/label/label.tsx
@@ -1,4 +1,9 @@
-import type { FC, LabelHTMLAttributes, ReactNode } from 'react';
+import {
+  forwardRef,
+  type ForwardRefRenderFunction,
+  type LabelHTMLAttributes,
+  type ReactNode,
+} from 'react';
 import styles from './label.module.scss';
 
 export type LabelSize = 'md' | 'sm';
@@ -31,26 +36,27 @@ export type LabelProps = Omit<
   size?: LabelSize;
 };
 
-/**
- * Label Component
- *
- * Render a HTML label element.
- */
-export const Label: FC<LabelProps> = ({
-  children,
-  className = '',
-  isHidden = false,
-  isRequired = false,
-  size = 'sm',
-  ...props
-}) => {
-  const visibilityClass = isHidden ? 'screen-reader-text' : '';
-  const sizeClass = styles[`label--${size}`];
-  const labelClass = `${styles.label} ${sizeClass} ${visibilityClass} ${className}`;
+const LabelWithRef: ForwardRefRenderFunction<HTMLLabelElement, LabelProps> = (
+  {
+    children,
+    className = '',
+    isHidden = false,
+    isRequired = false,
+    size = 'sm',
+    ...props
+  },
+  ref
+) => {
+  const labelClass = [
+    styles.label,
+    styles[`label--${size}`],
+    isHidden ? 'screen-reader-text' : '',
+    className,
+  ].join(' ');
   const requiredSymbol = ' *';
 
   return (
-    <label {...props} className={labelClass}>
+    <label {...props} className={labelClass} ref={ref}>
       {children}
       {isRequired ? (
         <span aria-hidden className={styles.required}>
@@ -60,3 +66,10 @@ export const Label: FC<LabelProps> = ({
     </label>
   );
 };
+
+/**
+ * Label Component
+ *
+ * Render a HTML label element.
+ */
+export const Label = forwardRef(LabelWithRef);