feat: add a native label props on Input (#365)

* feat: add a native label props on Input

* import type as type and add few doc

---------

Co-authored-by: Dylan Decrulle <dylan.decrulle@outlook.fr>

Author: m-maillot

src/Input.tsx

@@ -1,12 +1,13 @@
 import React, {
     memo,
     forwardRef,
-    ReactNode,
     useId,
-    type InputHTMLAttributes,
-    type TextareaHTMLAttributes,
+    type CSSProperties,
     type DetailedHTMLProps,
-    type CSSProperties
+    type InputHTMLAttributes,
+    type LabelHTMLAttributes,
+    type ReactNode,
+    type TextareaHTMLAttributes
 } from "react";
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
@@ -50,6 +51,11 @@ export namespace InputProps {
             InputHTMLAttributes<HTMLInputElement>,
             HTMLInputElement
         >;
+        /** Props forwarded to the underlying <label /> element */
+        nativeLabelProps?: DetailedHTMLProps<
+            LabelHTMLAttributes<HTMLInputElement>,
+            HTMLInputElement
+        >;
 
         nativeTextAreaProps?: never;
     };
@@ -62,6 +68,11 @@ export namespace InputProps {
             TextareaHTMLAttributes<HTMLTextAreaElement>,
             HTMLTextAreaElement
         >;
+        /** Props forwarded to the underlying <label /> element */
+        nativeLabelProps?: DetailedHTMLProps<
+            LabelHTMLAttributes<HTMLTextAreaElement>,
+            HTMLTextAreaElement
+        >;
 
         nativeInputProps?: never;
     };
@@ -89,6 +100,7 @@ export const Input = memo(
             nativeInputProps,
             addon,
             action,
+            nativeLabelProps,
             ...rest
         } = props;
 
@@ -137,6 +149,7 @@ export const Input = memo(
                     <label
                         className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
                         htmlFor={inputId}
+                        {...(nativeLabelProps as {})}
                     >
                         {label}
                         {hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}