diff --git a/slash/react/src/Form/Checkbox/CheckboxInput.tsx b/slash/react/src/Form/Checkbox/CheckboxInput.tsx
index 44f69dfee..0686ed558 100644
--- a/slash/react/src/Form/Checkbox/CheckboxInput.tsx
+++ b/slash/react/src/Form/Checkbox/CheckboxInput.tsx
@@ -1,11 +1,11 @@
 import { ComponentProps, forwardRef } from "react";
 
-import { Field, useOptionsWithId } from "../core";
+import { LegacyField, useOptionsWithId } from "../core";
 import { Checkbox } from "./Checkbox";
 import { CheckboxModes } from "./CheckboxModes";
 
 type Props = Omit<
-  ComponentProps<typeof Checkbox> & ComponentProps<typeof Field>,
+  ComponentProps<typeof Checkbox> & ComponentProps<typeof LegacyField>,
   "children" | "placeholder"
 >;
 
@@ -38,7 +38,7 @@ const CheckboxInput = forwardRef<HTMLInputElement, Props>(
     const newOptions = useOptionsWithId(options);
 
     return (
-      <Field
+      <LegacyField
         label={label}
         id={newOptions[0].id}
         message={message}
@@ -57,7 +57,7 @@ const CheckboxInput = forwardRef<HTMLInputElement, Props>(
           ref={inputRef}
           {...checkboxProps}
         />
-      </Field>
+      </LegacyField>
     );
   },
 );
diff --git a/slash/react/src/Form/Choice/ChoiceInput.tsx b/slash/react/src/Form/Choice/ChoiceInput.tsx
index 0ce09d924..598ea8825 100644
--- a/slash/react/src/Form/Choice/ChoiceInput.tsx
+++ b/slash/react/src/Form/Choice/ChoiceInput.tsx
@@ -1,9 +1,9 @@
 import { forwardRef, type ComponentProps } from "react";
-import { Field, useInputClassModifier, useOptionsWithId } from "../core";
+import { LegacyField, useInputClassModifier, useOptionsWithId } from "../core";
 import { Choice } from "./Choice";
 
 type Props = ComponentProps<typeof Choice> &
-  Omit<ComponentProps<typeof Field>, "children">;
+  Omit<ComponentProps<typeof LegacyField>, "children">;
 
 const defaultOptions = [
   { label: "Oui", value: true, id: "radioItemTrue" },
@@ -49,7 +49,7 @@ const ChoiceInput = forwardRef<HTMLInputElement, Props>(
       value: o.value === "true",
     }));
     return (
-      <Field
+      <LegacyField
         label={label}
         id={firstId}
         message={message}
@@ -70,7 +70,7 @@ const ChoiceInput = forwardRef<HTMLInputElement, Props>(
           required={required}
           disabled={disabled}
         />
-      </Field>
+      </LegacyField>
     );
   },
 );
diff --git a/slash/react/src/Form/Date/DateInput.tsx b/slash/react/src/Form/Date/DateInput.tsx
index 3b4fc9411..529633f63 100644
--- a/slash/react/src/Form/Date/DateInput.tsx
+++ b/slash/react/src/Form/Date/DateInput.tsx
@@ -1,9 +1,14 @@
 import { ComponentPropsWithoutRef, ReactNode, useId } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 import { Date } from "./Date";
 
 type Props = Omit<ComponentPropsWithoutRef<typeof Date>, "placeholderText"> &
-  ComponentPropsWithoutRef<typeof Field> & {
+  ComponentPropsWithoutRef<typeof LegacyField> & {
     placeholder?: string;
     helpMessage?: ReactNode;
     children?: ReactNode;
@@ -35,7 +40,7 @@ const DateInput = ({
     required,
   );
   return (
-    <Field
+    <LegacyField
       label={label}
       id={inputId}
       message={message}
@@ -61,7 +66,7 @@ const DateInput = ({
         {children}
       </FieldInput>
       <HelpMessage message={helpMessage} isVisible={!message} />
-    </Field>
+    </LegacyField>
   );
 };
 
diff --git a/slash/react/src/Form/File/FileInput.tsx b/slash/react/src/Form/File/FileInput.tsx
index f77a51db5..19c64f435 100644
--- a/slash/react/src/Form/File/FileInput.tsx
+++ b/slash/react/src/Form/File/FileInput.tsx
@@ -1,10 +1,15 @@
 import "@axa-fr/design-system-slash-css/dist/Form/File/File.scss";
 import { ComponentPropsWithoutRef, ReactNode, useId } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 import { CustomFile, File } from "./File";
 import { FileTable } from "./FileTable";
 
-type FieldProps = ComponentPropsWithoutRef<typeof Field>;
+type FieldProps = ComponentPropsWithoutRef<typeof LegacyField>;
 type FileProps = ComponentPropsWithoutRef<typeof File>;
 type FileTableProps = ComponentPropsWithoutRef<typeof FileTable>;
 
@@ -56,7 +61,7 @@ const FileInput = ({
   );
   const rowModifier = `${inputFieldClassModifier} label-top`;
   return (
-    <Field
+    <LegacyField
       label={label}
       id={inputId}
       message={message}
@@ -91,7 +96,7 @@ const FileInput = ({
         onClick={(selectedId) => onDeleteClick(selectedId, inputId)}
         classModifier={classModifier}
       />
-    </Field>
+    </LegacyField>
   );
 };
 
diff --git a/slash/react/src/Form/MultiSelect/MultiSelectInput.tsx b/slash/react/src/Form/MultiSelect/MultiSelectInput.tsx
index a4267e6a4..c8fa468a1 100644
--- a/slash/react/src/Form/MultiSelect/MultiSelectInput.tsx
+++ b/slash/react/src/Form/MultiSelect/MultiSelectInput.tsx
@@ -1,10 +1,15 @@
 import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
 
 import { useId, type ComponentProps, type ReactNode } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 import { MultiSelect } from "./MultiSelect";
 
-type Props = ComponentProps<typeof Field> &
+type Props = ComponentProps<typeof LegacyField> &
   ComponentProps<typeof MultiSelect> & {
     helpMessage?: ReactNode;
   };
@@ -37,7 +42,7 @@ const MultiSelectInput = ({
   const inputId = id || generatedId;
 
   return (
-    <Field
+    <LegacyField
       label={label}
       id={inputId}
       message={message}
@@ -62,7 +67,7 @@ const MultiSelectInput = ({
         {children}
       </FieldInput>
       <HelpMessage message={helpMessage} isVisible={!message} />
-    </Field>
+    </LegacyField>
   );
 };
 
diff --git a/slash/react/src/Form/Number/NumberInput.tsx b/slash/react/src/Form/Number/NumberInput.tsx
index c0d31fb7e..bf876e868 100644
--- a/slash/react/src/Form/Number/NumberInput.tsx
+++ b/slash/react/src/Form/Number/NumberInput.tsx
@@ -7,11 +7,16 @@ import {
   ReactNode,
   useId,
 } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 
 import { Number } from "./Number";
 
-type Props = ComponentPropsWithoutRef<typeof Field> &
+type Props = ComponentPropsWithoutRef<typeof LegacyField> &
   ComponentPropsWithRef<typeof Number> & {
     helpMessage?: ReactNode;
     children?: ReactNode;
@@ -43,7 +48,7 @@ export const NumberInput = ({
     required,
   );
   return (
-    <Field
+    <LegacyField
       label={label}
       id={inputId}
       message={message}
@@ -68,6 +73,6 @@ export const NumberInput = ({
         {children}
       </FieldInput>
       <HelpMessage message={helpMessage} isVisible={!message} />
-    </Field>
+    </LegacyField>
   );
 };
diff --git a/slash/react/src/Form/Pass/PassInput.tsx b/slash/react/src/Form/Pass/PassInput.tsx
index f34a20a23..1246a492a 100644
--- a/slash/react/src/Form/Pass/PassInput.tsx
+++ b/slash/react/src/Form/Pass/PassInput.tsx
@@ -1,5 +1,10 @@
 import { ComponentProps, ReactNode, useId, useState } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 import { Pass } from "./Pass";
 
 const strengthList: Record<number, string> = {
@@ -25,7 +30,7 @@ const calculateStrength = (score?: string | null) => {
 };
 
 type PassProps = ComponentProps<typeof Pass>;
-type Props = ComponentProps<typeof Field> &
+type Props = ComponentProps<typeof LegacyField> &
   Omit<PassProps, "onToggleType" | "type"> & {
     helpMessage?: ReactNode;
     score?: string;
@@ -63,7 +68,7 @@ const PassInput = ({
   );
 
   return (
-    <Field
+    <LegacyField
       label={label}
       message={message}
       messageType={messageType}
@@ -92,7 +97,7 @@ const PassInput = ({
         {children}
         <HelpMessage message={helpMessage} isVisible={!message} />
       </FieldInput>
-    </Field>
+    </LegacyField>
   );
 };
 
diff --git a/slash/react/src/Form/Radio/RadioInput.tsx b/slash/react/src/Form/Radio/RadioInput.tsx
index 9e87064e6..e62eceac8 100644
--- a/slash/react/src/Form/Radio/RadioInput.tsx
+++ b/slash/react/src/Form/Radio/RadioInput.tsx
@@ -1,13 +1,13 @@
 import { ComponentPropsWithoutRef, forwardRef } from "react";
 import {
-  Field,
+  LegacyField,
   getFirstId,
   useInputClassModifier,
   useOptionsWithId,
 } from "../core";
 import { Radio, RadioModes } from "./Radio";
 
-type RadioInputProps = ComponentPropsWithoutRef<typeof Field> &
+type RadioInputProps = ComponentPropsWithoutRef<typeof LegacyField> &
   ComponentPropsWithoutRef<typeof Radio>;
 
 const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
@@ -47,7 +47,7 @@ const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
       );
 
     return (
-      <Field
+      <LegacyField
         label={label}
         id={firstId}
         message={message}
@@ -72,7 +72,7 @@ const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
           {...radioProps}
         />
         {children}
-      </Field>
+      </LegacyField>
     );
   },
 );
diff --git a/slash/react/src/Form/Select/SelectInput.tsx b/slash/react/src/Form/Select/SelectInput.tsx
index 73b64aed9..1efb76910 100644
--- a/slash/react/src/Form/Select/SelectInput.tsx
+++ b/slash/react/src/Form/Select/SelectInput.tsx
@@ -6,10 +6,15 @@ import {
   useId,
 } from "react";
 
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 import { Select } from "./Select";
 
-type Props = ComponentProps<typeof Field> &
+type Props = ComponentProps<typeof LegacyField> &
   ComponentProps<typeof Select> & {
     helpMessage?: ReactNode;
   };
@@ -45,7 +50,7 @@ const SelectInput = forwardRef<HTMLSelectElement, PropsWithChildren<Props>>(
         required,
       );
     return (
-      <Field
+      <LegacyField
         label={label}
         id={inputId}
         message={message}
@@ -72,7 +77,7 @@ const SelectInput = forwardRef<HTMLSelectElement, PropsWithChildren<Props>>(
           {children}
         </FieldInput>
         <HelpMessage message={helpMessage} isVisible={!message} />
-      </Field>
+      </LegacyField>
     );
   },
 );
diff --git a/slash/react/src/Form/Slider/SliderInput.tsx b/slash/react/src/Form/Slider/SliderInput.tsx
index 684846346..16655db78 100644
--- a/slash/react/src/Form/Slider/SliderInput.tsx
+++ b/slash/react/src/Form/Slider/SliderInput.tsx
@@ -1,8 +1,8 @@
 import { useId, useMemo, type ComponentProps, type ReactNode } from "react";
-import { Field, HelpMessage } from "../core";
+import { HelpMessage, LegacyField } from "../core";
 import { Slider } from "./Slider";
 
-type Props = ComponentProps<typeof Field> &
+type Props = ComponentProps<typeof LegacyField> &
   ComponentProps<typeof Slider> & {
     helpMessage?: ReactNode;
   };
@@ -26,7 +26,7 @@ const SliderInput = ({
   const newId = useMemo(() => id ?? generatedId, [generatedId, id]);
 
   return (
-    <Field
+    <LegacyField
       id={newId}
       label={label}
       message={message}
@@ -41,7 +41,7 @@ const SliderInput = ({
       <Slider {...sliderProps} id={id} classModifier={classModifier} />
       {children}
       <HelpMessage message={helpMessage} isVisible={!message} />
-    </Field>
+    </LegacyField>
   );
 };
 
diff --git a/slash/react/src/Form/Text/Text.tsx b/slash/react/src/Form/Text/Text.tsx
index 39c68a18f..ca4a2e6de 100644
--- a/slash/react/src/Form/Text/Text.tsx
+++ b/slash/react/src/Form/Text/Text.tsx
@@ -26,6 +26,6 @@ const Text = forwardRef<HTMLInputElement, Props>(
   },
 );
 
-Text.displayName = "Text";
+Text.displayName = "EnhancedInput";
 
 export { Text };
diff --git a/slash/react/src/Form/Text/TextInput.stories.tsx b/slash/react/src/Form/Text/TextInput.stories.tsx
index 9ab817964..94e88cfd7 100644
--- a/slash/react/src/Form/Text/TextInput.stories.tsx
+++ b/slash/react/src/Form/Text/TextInput.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { MessageTypes } from "../core";
-import { TextInput } from "./TextInput";
 import { inputTypes } from "./inputTypes";
+import { TextInput } from "./TextInput";
 
 const meta: Meta<typeof TextInput> = {
   component: TextInput,
@@ -29,6 +29,8 @@ export const TextInputStory: Story = {
     readOnly: false,
     disabled: false,
     autoFocus: false,
+    message: "message",
+
     className: "",
     type: "text",
     label: "Your name",
diff --git a/slash/react/src/Form/Text/TextInput.tsx b/slash/react/src/Form/Text/TextInput.tsx
index 0a6baaf96..221cd8e82 100644
--- a/slash/react/src/Form/Text/TextInput.tsx
+++ b/slash/react/src/Form/Text/TextInput.tsx
@@ -1,75 +1,28 @@
-import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
-import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
-import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
-import { ComponentProps, forwardRef, ReactNode, useId } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
-
+import { ComponentProps, forwardRef, ReactNode } from "react";
+import { Field } from "../core";
 import { Text } from "./Text";
 
-type Props = ComponentProps<typeof Field> &
+export type TextInputProps = ComponentProps<typeof Field> &
   ComponentProps<typeof Text> & {
     helpMessage?: ReactNode;
   };
 
-const TextInput = forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      id,
-      message,
-      children,
-      helpMessage,
-      classNameContainerLabel,
-      classNameContainerInput,
-      label,
-      messageType,
-      isVisible,
-      className,
-      forceDisplayMessage,
-      classModifier = "",
-      disabled = false,
-      required,
-      ...inputTextProps
-    },
-    inputRef,
-  ) => {
-    const inputUseId = useId();
-    const inputId = id ?? inputUseId;
-    const { inputClassModifier, inputFieldClassModifier } =
-      useInputClassModifier(
-        classModifier,
-        disabled,
-        Boolean(children),
-        required,
-      );
-
+// eslint-disable-next-line react/no-multi-comp
+const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  ({ children, ...props }, inputRef) => {
     return (
       <Field
-        label={label}
-        message={message}
-        messageType={messageType}
-        isVisible={isVisible}
-        forceDisplayMessage={forceDisplayMessage}
-        className={className}
-        id={inputId}
-        classModifier={classModifier}
-        classNameContainerLabel={classNameContainerLabel}
-        classNameContainerInput={classNameContainerInput}
-      >
-        <FieldInput
-          className="af-form__text"
-          classModifier={inputFieldClassModifier}
-        >
+        {...props}
+        renderInput={({ id, classModifier }) => (
           <Text
-            id={inputId}
-            classModifier={inputClassModifier}
-            disabled={disabled}
+            id={id}
+            classModifier={classModifier}
             ref={inputRef}
-            required={required}
-            {...inputTextProps}
+            {...props}
           />
-          {children}
-        </FieldInput>
-        <HelpMessage message={helpMessage} isVisible={!message} />
+        )}
+      >
+        {children}
       </Field>
     );
   },
diff --git a/slash/react/src/Form/Text/index.ts b/slash/react/src/Form/Text/index.ts
index e13c018cf..de4b8a7a7 100644
--- a/slash/react/src/Form/Text/index.ts
+++ b/slash/react/src/Form/Text/index.ts
@@ -1,2 +1,2 @@
-export { TextInput } from "./TextInput";
 export { Text } from "./Text";
+export { TextInput } from "./TextInput";
diff --git a/slash/react/src/Form/Textarea/TextareaInput.tsx b/slash/react/src/Form/Textarea/TextareaInput.tsx
index 971bdc7cc..7d7552af1 100644
--- a/slash/react/src/Form/Textarea/TextareaInput.tsx
+++ b/slash/react/src/Form/Textarea/TextareaInput.tsx
@@ -2,11 +2,16 @@ import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { ComponentProps, forwardRef, ReactNode, useId } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 
 import { Textarea } from "./Textarea";
 
-type Props = ComponentProps<typeof Field> &
+type Props = ComponentProps<typeof LegacyField> &
   ComponentProps<typeof Textarea> & {
     helpMessage?: ReactNode;
   };
@@ -46,7 +51,7 @@ const TextareaInput = forwardRef<HTMLTextAreaElement, Props>(
       );
 
     return (
-      <Field
+      <LegacyField
         label={label}
         id={inputId}
         message={message}
@@ -74,7 +79,7 @@ const TextareaInput = forwardRef<HTMLTextAreaElement, Props>(
           {children}
         </FieldInput>
         <HelpMessage message={helpMessage} isVisible={!message} />
-      </Field>
+      </LegacyField>
     );
   },
 );
diff --git a/slash/react/src/Form/core/Field.tsx b/slash/react/src/Form/core/Field.tsx
index 5e9e7a234..83909d7d7 100644
--- a/slash/react/src/Form/core/Field.tsx
+++ b/slash/react/src/Form/core/Field.tsx
@@ -1,14 +1,15 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
 import classNames from "classnames";
+import { ReactNode, useId } from "react";
+import {
+  FieldError,
+  FormClassManager,
+  HelpMessage,
+  MessageTypes,
+  useInputClassModifier,
+} from ".";
 import { getComponentClassName } from "../../utilities";
-import { FieldError } from "./FieldError";
-import { MessageTypes } from "./MessageTypes";
-import { FieldForm } from "./FieldForm";
 
-type FieldProps = Omit<
-  ComponentPropsWithoutRef<typeof FieldForm>,
-  "children"
-> & {
+type InputProps = {
   label: ReactNode;
   children?: ReactNode;
   id?: string;
@@ -19,63 +20,87 @@ type FieldProps = Omit<
   roleContainer?: string;
   ariaLabelContainer?: string;
   isLabelContainerLinkedToInput?: boolean;
+  forceDisplayMessage?: boolean;
+  message?: string;
+  messageType?: MessageTypes;
+  required?: boolean;
+  disabled?: boolean;
+  helpMessage?: ReactNode;
 };
 
 export const Field = ({
-  id = "",
-  message = "",
-  messageType = MessageTypes.error,
+  classNameContainerInput = "col-md-10",
+  classNameContainerLabel = "col-md-2",
   label,
-  children,
   forceDisplayMessage,
+  message,
+  messageType,
+  required,
   classModifier = "",
-  className,
-  classNameContainerLabel = "col-md-2",
-  classNameContainerInput = "col-md-10",
+  children,
+  disabled = false,
+  helpMessage,
+  id,
   isVisible = true,
   roleContainer,
   ariaLabelContainer,
   isLabelContainerLinkedToInput = true,
-}: FieldProps) => {
+  renderInput: Element,
+}: InputProps & {
+  renderInput: (props: { id: string; classModifier: string }) => ReactNode;
+}) => {
+  const inputUseId = useId();
+  const inputId = id ?? inputUseId;
+
+  const actualRequired = required || classModifier.includes("required");
+
+  const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(
+    classModifier,
+    disabled,
+    Boolean(children),
+    actualRequired,
+  );
+
   if (!isVisible) {
     return null;
   }
 
-  const componentClassName = getComponentClassName(
-    className,
-    classModifier,
-    "row af-form__group",
+  const fieldContainerClassName = getComponentClassName(
+    "af-form__text",
+    forceDisplayMessage
+      ? `${inputFieldClassModifier} ${FormClassManager.getModifier(messageType)}`
+      : inputFieldClassModifier,
   );
 
   return (
     <div
-      className={componentClassName}
+      className={classNames("row af-form__group", {
+        "af-form__group--required": actualRequired,
+      })}
       role={roleContainer}
       aria-label={ariaLabelContainer}
     >
       <div className={classNameContainerLabel}>
         <label
-          className={classNames(
-            {
-              "af-form__group-label--required":
-                classModifier.includes("required"),
-            },
-            "af-form__group-label",
-          )}
-          htmlFor={isLabelContainerLinkedToInput ? id : undefined}
+          className={classNames("af-form__group-label", {
+            "af-form__group-label--required": actualRequired,
+          })}
+          htmlFor={isLabelContainerLinkedToInput ? inputId : undefined}
         >
           {label}
         </label>
       </div>
-      <FieldForm
-        className={classNameContainerInput}
-        message={message}
-        messageType={messageType}
-        forceDisplayMessage={forceDisplayMessage}
-      >
-        {children}
-        <FieldError message={message} messageType={messageType} />
-      </FieldForm>
+      <div className={classNameContainerInput}>
+        <div className={fieldContainerClassName}>
+          <Element id={inputId} classModifier={inputClassModifier} />
+          {children}
+        </div>
+        {forceDisplayMessage ? (
+          <FieldError message={message} messageType={messageType} />
+        ) : (
+          <HelpMessage message={helpMessage} />
+        )}
+      </div>
     </div>
   );
 };
diff --git a/slash/react/src/Form/core/LegacyField.tsx b/slash/react/src/Form/core/LegacyField.tsx
new file mode 100644
index 000000000..e2ac03405
--- /dev/null
+++ b/slash/react/src/Form/core/LegacyField.tsx
@@ -0,0 +1,81 @@
+import classNames from "classnames";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { getComponentClassName } from "../../utilities";
+import { FieldError } from "./FieldError";
+import { FieldForm } from "./FieldForm";
+import { MessageTypes } from "./MessageTypes";
+
+type FieldProps = Omit<
+  ComponentPropsWithoutRef<typeof FieldForm>,
+  "children"
+> & {
+  label: ReactNode;
+  children?: ReactNode;
+  id?: string;
+  classModifier?: string;
+  classNameContainerLabel?: string;
+  classNameContainerInput?: string;
+  isVisible?: boolean;
+  roleContainer?: string;
+  ariaLabelContainer?: string;
+  isLabelContainerLinkedToInput?: boolean;
+};
+
+export const LegacyField = ({
+  id = "",
+  message = "",
+  messageType = MessageTypes.error,
+  label,
+  children,
+  forceDisplayMessage,
+  classModifier = "",
+  className,
+  classNameContainerLabel = "col-md-2",
+  classNameContainerInput = "col-md-10",
+  isVisible = true,
+  roleContainer,
+  ariaLabelContainer,
+  isLabelContainerLinkedToInput = true,
+}: FieldProps) => {
+  if (!isVisible) {
+    return null;
+  }
+
+  const componentClassName = getComponentClassName(
+    className,
+    classModifier,
+    "row af-form__group",
+  );
+
+  return (
+    <div
+      className={componentClassName}
+      role={roleContainer}
+      aria-label={ariaLabelContainer}
+    >
+      <div className={classNameContainerLabel}>
+        <label
+          className={classNames(
+            {
+              "af-form__group-label--required":
+                classModifier.includes("required"),
+            },
+            "af-form__group-label",
+          )}
+          htmlFor={isLabelContainerLinkedToInput ? id : undefined}
+        >
+          {label}
+        </label>
+      </div>
+      <FieldForm
+        className={classNameContainerInput}
+        message={message}
+        messageType={messageType}
+        forceDisplayMessage={forceDisplayMessage}
+      >
+        {children}
+        <FieldError message={message} messageType={messageType} />
+      </FieldForm>
+    </div>
+  );
+};
diff --git a/slash/react/src/Form/core/index.ts b/slash/react/src/Form/core/index.ts
index 8365b9604..5a1f91354 100644
--- a/slash/react/src/Form/core/index.ts
+++ b/slash/react/src/Form/core/index.ts
@@ -1,18 +1,19 @@
 import { ReactNode } from "react";
 
 export { Field } from "./Field";
-export { FieldInput } from "./FieldInput";
-export { MessageTypes } from "./MessageTypes";
 export { FieldError } from "./FieldError";
-export { FormClassManager } from "./FormClassManager";
 export { FieldForm } from "./FieldForm";
+export { FieldInput } from "./FieldInput";
+export { FormClassManager } from "./FormClassManager";
 export { HelpMessage } from "./HelpMessage";
 export { InputList } from "./InputList";
+export { LegacyField } from "./LegacyField";
+export { MessageTypes } from "./MessageTypes";
 
-export { useInputClassModifier } from "./useInputClassModifier";
+export { getFirstId } from "./getFirstId";
 export { getOptionClassName } from "./getOptionClassName";
+export { useInputClassModifier } from "./useInputClassModifier";
 export { useOptionsWithId } from "./useOptionsWithId";
-export { getFirstId } from "./getFirstId";
 
 export type Option = {
   id?: string;