From 91bf8972c23a253f46271a9fc809240270338141 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Wed, 24 Apr 2024 15:28:59 -0400
Subject: [PATCH 01/23] chore(form-field): form refactor

---
 .../src/components/combobox/combobox.tsx      |  12 +-
 .../components/date-picker/date-picker.tsx    |   8 +-
 .../dropdown-list/dropdown-list.tsx           |   8 +-
 .../field-container/field-container.test.tsx  |  40 ---
 .../field-container.test.tsx.snap             | 202 -----------
 .../field-container/field-container.tsx       |  94 ------
 .../feedbacks/invalid-field.test.tsx          |   2 +-
 .../feedbacks/invalid-field.test.tsx.snap     |   2 +-
 .../{ => form}/feedbacks/invalid-field.tsx    |   8 +-
 .../form-field-container.test.tsx             | 318 ++++++++++++++++++
 .../form-field-container.test.tsx.snap        | 241 +++++++++++++
 .../form-container/form-field-container.tsx   | 134 ++++++++
 .../src/components/form/form-field-context.ts |  39 +++
 packages/react/src/components/form/utils.ts   |  71 ++++
 .../numeric-input/numeric-input.tsx           |   8 +-
 .../password-creation-input.tsx               |   6 +-
 .../password-input/password-input.tsx         |   8 +-
 .../stepper-input/stepper-input.tsx           |   8 +-
 .../src/components/text-area/text-area.tsx    |   8 +-
 .../components/text-input/styles/inputs.tsx   |  84 ++++-
 .../src/components/text-input/text-input.tsx  |   8 +-
 21 files changed, 928 insertions(+), 381 deletions(-)
 delete mode 100644 packages/react/src/components/field-container/field-container.test.tsx
 delete mode 100644 packages/react/src/components/field-container/field-container.test.tsx.snap
 delete mode 100644 packages/react/src/components/field-container/field-container.tsx
 rename packages/react/src/components/{ => form}/feedbacks/invalid-field.test.tsx (81%)
 rename packages/react/src/components/{ => form}/feedbacks/invalid-field.test.tsx.snap (97%)
 rename packages/react/src/components/{ => form}/feedbacks/invalid-field.tsx (86%)
 create mode 100644 packages/react/src/components/form/form-container/form-field-container.test.tsx
 create mode 100644 packages/react/src/components/form/form-container/form-field-container.test.tsx.snap
 create mode 100644 packages/react/src/components/form/form-container/form-field-container.tsx
 create mode 100644 packages/react/src/components/form/form-field-context.ts
 create mode 100644 packages/react/src/components/form/utils.ts

diff --git a/packages/react/src/components/combobox/combobox.tsx b/packages/react/src/components/combobox/combobox.tsx
index 971999d4c1..3d38545726 100644
--- a/packages/react/src/components/combobox/combobox.tsx
+++ b/packages/react/src/components/combobox/combobox.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FormFieldContainer } from '../form/form-container/form-field-container';
 import { IconButton } from '../buttons/icon-button';
 import { Listbox, ListboxOption } from '../listbox/listbox';
 import { TooltipProps } from '../tooltip/tooltip';
@@ -46,7 +46,7 @@ function getBorderColor({ disabled, theme, $valid }: TextboxProps): string {
     return theme.component['combobox-border-color'];
 }
 
-const StyledFieldContainer = styled(FieldContainer)`
+const StyledFieldContainer = styled(FormFieldContainer)`
     position: relative;
 `;
 
@@ -75,7 +75,7 @@ const Textbox = styled.input<TextboxProps>`
     padding: 0 var(--spacing-1x);
     width: 100%;
     ${({ theme }) => focus({ theme }, true)};
-    
+
     &::placeholder {
         color: ${({ theme }) => theme.greys['mid-grey']};
         font-style: italic;
@@ -109,14 +109,14 @@ const ClearButton = styled(IconButton)<{ disabled?: boolean }>`
     position: absolute;
     right: calc(var(--size-1x) + var(--spacing-1halfx));
     width: var(--size-1x);
-    
+
     &::after {
         border-right: ${({ theme }) => `1px solid ${theme.greys['mid-grey']}`};
         content: '';
         height: calc(var(--size-2x) - var(--spacing-2x));
         margin-left: var(--spacing-1x);
     }
-    
+
     &:hover {
         background-color: transparent;
     }
@@ -593,7 +593,7 @@ export const Combobox: VoidFunctionComponent<ComboboxProps> = ({
         <StyledFieldContainer
             className={className}
             noMargin={noMargin}
-            fieldId={id}
+            id={id}
             label={label}
             required={required}
             tooltip={tooltip}
diff --git a/packages/react/src/components/date-picker/date-picker.tsx b/packages/react/src/components/date-picker/date-picker.tsx
index a95460bea4..cd720ec782 100644
--- a/packages/react/src/components/date-picker/date-picker.tsx
+++ b/packages/react/src/components/date-picker/date-picker.tsx
@@ -24,7 +24,7 @@ import { eventIsInside } from '../../utils/events';
 import { v4 as uuid } from '../../utils/uuid';
 import { Button } from '../buttons/button';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FormFieldContainer } from '../form/form-container/form-field-container';
 import { Icon } from '../icon/icon';
 import { TooltipProps } from '../tooltip/tooltip';
 import { CalendarHeader } from './calendar-header';
@@ -547,10 +547,10 @@ export const Datepicker = forwardRef(({
     return (
         <>
             <ReactDatePickerStyles />
-            <FieldContainer
+            <FormFieldContainer
                 className={className}
                 noMargin={noMargin}
-                fieldId={fieldId}
+                id={fieldId}
                 label={label}
                 required={required}
                 tooltip={tooltip}
@@ -620,7 +620,7 @@ export const Datepicker = forwardRef(({
                         <Icon name="calendar" size={isMobile ? '24' : '16'} />
                     </CalendarButton>
                 </Container>
-            </FieldContainer>
+            </FormFieldContainer>
         </>
     );
 });
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.tsx b/packages/react/src/components/dropdown-list/dropdown-list.tsx
index a0327c7378..6e6b6b61f9 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.tsx
+++ b/packages/react/src/components/dropdown-list/dropdown-list.tsx
@@ -14,7 +14,7 @@ import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { isLetterOrNumber } from '../../utils/regex';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FormFieldContainer } from '../form/form-container/form-field-container';
 import { Icon } from '../icon/icon';
 import { Listbox, ListboxOption } from '../listbox/listbox';
 import { TooltipProps } from '../tooltip/tooltip';
@@ -52,7 +52,7 @@ function getBorderColor({ $disabled, theme, $valid }: TextboxProps): string {
     return theme.component['dropdown-list-input-border-color'];
 }
 
-const StyledFieldContainer = styled(FieldContainer)`
+const StyledFieldContainer = styled(FormFieldContainer)`
     position: relative;
 `;
 
@@ -95,7 +95,7 @@ const TagWrapper = styled.div`
 
 const ListBoxTag = styled(Tag)`
     margin: 2px;
-    
+
     & + & {
         margin-left: 2px;
     }
@@ -462,7 +462,7 @@ export const DropdownList: VoidFunctionComponent<DropdownListProps<boolean | und
         <StyledFieldContainer
             className={className}
             noMargin={noMargin}
-            fieldId={id}
+            id={id}
             label={label}
             required={required}
             tooltip={tooltip}
diff --git a/packages/react/src/components/field-container/field-container.test.tsx b/packages/react/src/components/field-container/field-container.test.tsx
deleted file mode 100644
index d997a7e430..0000000000
--- a/packages/react/src/components/field-container/field-container.test.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { renderWithProviders } from '../../test-utils/renderer';
-import { FieldContainer } from './field-container';
-
-const defaultProps = {
-    fieldId: 'test-id',
-    label: 'test label',
-    validationErrorMessage: 'This text area input is invalid',
-};
-
-describe('Field Container', () => {
-    test('matches snapshot', () => {
-        const tree = renderWithProviders(
-            <FieldContainer valid {...defaultProps}>
-                Children
-            </FieldContainer>,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-
-    test('should have invalid styles given valid prop is set to false', () => {
-        const tree = renderWithProviders(
-            <FieldContainer valid={false} {...defaultProps}>
-                Children
-            </FieldContainer>,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-
-    test('should not have margins given noMargin prop is set to true', () => {
-        const tree = renderWithProviders(
-            <FieldContainer valid noMargin {...defaultProps}>
-                Children
-            </FieldContainer>,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-});
diff --git a/packages/react/src/components/field-container/field-container.test.tsx.snap b/packages/react/src/components/field-container/field-container.test.tsx.snap
deleted file mode 100644
index 522105761b..0000000000
--- a/packages/react/src/components/field-container/field-container.test.tsx.snap
+++ /dev/null
@@ -1,202 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Field Container matches snapshot 1`] = `
-.c2 {
-  color: #000000;
-  display: block;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-  margin: 0;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-input + .c1 {
-  margin-left: var(--spacing-half);
-}
-
-.c0 {
-  margin: 0 0 var(--spacing-3x);
-}
-
-.c0 input,
-.c0 select,
-.c0 textarea {
-  border-color: #60666E;
-}
-
-.c0:focus {
-  border-color: #006296;
-}
-
-.c0 > :nth-child(1) {
-  margin-bottom: var(--spacing-half);
-}
-
-<div
-  class="c0"
->
-  <label
-    class="c1 c2"
-    for="test-id"
-    id="test-id_label"
-  >
-    test label
-  </label>
-  Children
-</div>
-`;
-
-exports[`Field Container should have invalid styles given valid prop is set to false 1`] = `
-.c3 {
-  color: #CD2C23;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-}
-
-.c4 {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-right: var(--spacing-base);
-}
-
-.c2 {
-  color: #000000;
-  display: block;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-  margin: 0;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-input + .c1 {
-  margin-left: var(--spacing-half);
-}
-
-.c0 {
-  margin: 0 0 var(--spacing-3x);
-}
-
-.c0 input,
-.c0 select,
-.c0 textarea {
-  border-color: #CD2C23;
-}
-
-.c0:focus {
-  border-color: #CD2C23;
-}
-
-.c0 > :nth-child(2) {
-  margin-bottom: var(--spacing-half);
-}
-
-<div
-  class="c0"
->
-  <label
-    class="c1 c2"
-    for="test-id"
-    id="test-id_label"
-  >
-    test label
-  </label>
-  <span
-    aria-live="polite"
-    class="c3"
-    data-testid="invalid-field"
-    id="test-id_invalid"
-    role="alert"
-  >
-    <svg
-      class="c4"
-      color="currentColor"
-      focusable="false"
-      height="16"
-      width="16"
-    />
-    This text area input is invalid
-  </span>
-  Children
-</div>
-`;
-
-exports[`Field Container should not have margins given noMargin prop is set to true 1`] = `
-.c2 {
-  color: #000000;
-  display: block;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-  margin: 0;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-input + .c1 {
-  margin-left: var(--spacing-half);
-}
-
-.c0 {
-  margin: 0;
-}
-
-.c0 input,
-.c0 select,
-.c0 textarea {
-  border-color: #60666E;
-}
-
-.c0:focus {
-  border-color: #006296;
-}
-
-.c0 > :nth-child(1) {
-  margin-bottom: var(--spacing-half);
-}
-
-<div
-  class="c0"
->
-  <label
-    class="c1 c2"
-    for="test-id"
-    id="test-id_label"
-  >
-    test label
-  </label>
-  Children
-</div>
-`;
diff --git a/packages/react/src/components/field-container/field-container.tsx b/packages/react/src/components/field-container/field-container.tsx
deleted file mode 100644
index b443214c3f..0000000000
--- a/packages/react/src/components/field-container/field-container.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { FunctionComponent, PropsWithChildren } from 'react';
-import styled from 'styled-components';
-import { ResolvedTheme } from '../../themes/theme';
-import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { InvalidField } from '../feedbacks/invalid-field';
-import { Label } from '../label/label';
-import { TooltipProps } from '../tooltip/tooltip';
-
-interface StyledDivProps {
-    theme: ResolvedTheme;
-    hasLabel: boolean;
-    hasHint: boolean;
-    valid: boolean;
-    noMargin?: boolean;
-}
-
-const StyledDiv = styled.div<StyledDivProps>`
-    margin: ${({ noMargin }) => (noMargin ? '0' : '0 0 var(--spacing-3x)')};
-
-    input,
-    select,
-    textarea {
-        border-color: ${({ theme, valid }) => (valid ? theme.component['field-input-border-color'] : theme.component['field-input-error-border-color'])};
-    }
-
-    &:focus {
-        border-color: ${({ theme, valid }) => (valid ? theme.component['field-input-focus-border-color'] : theme.component['field-input-error-focus-border-color'])};
-    }
-
-    > :nth-child(${({ hasLabel, hasHint, valid }) => (hasLabel ? 1 : 0) + (hasHint ? 1 : 0) + (!valid ? 1 : 0)}) {
-        margin-bottom: var(--spacing-half);
-    }
-`;
-
-const StyledHint = styled.span<{ isMobile: boolean }>`
-    color: ${(props) => props.theme.component['field-hint-text-color']};
-    display: block;
-    font-size: ${({ isMobile }) => (isMobile ? '0.875rem' : '0.75rem')};
-    font-weight: var(--font-normal);
-    letter-spacing: 0.02rem;
-    line-height: ${({ isMobile }) => (isMobile ? '1.5rem' : '1.25rem')};
-`;
-
-export interface FieldContainerProps {
-    className?: string;
-    fieldId: string;
-    hint?: string;
-    label?: string;
-    noInvalidFieldIcon?: boolean;
-    noMargin?: boolean;
-    required?: boolean;
-    tooltip?: TooltipProps;
-    valid: boolean;
-    validationErrorMessage: string;
-}
-
-export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerProps>> = ({
-    children,
-    className,
-    fieldId,
-    hint,
-    label,
-    noInvalidFieldIcon,
-    noMargin,
-    required,
-    tooltip,
-    valid,
-    validationErrorMessage,
-    ...props
-}) => {
-    const { isMobile } = useDeviceContext();
-
-    return (
-        <StyledDiv
-            className={className}
-            noMargin={noMargin}
-            hasLabel={!!label}
-            hasHint={!!hint}
-            valid={valid}
-            {...props /* eslint-disable-line react/jsx-props-no-spreading */}
-        >
-            {label && <Label id={`${fieldId}_label`} forId={fieldId} tooltip={tooltip} required={required}>{label}</Label>}
-            {hint && <StyledHint id={`${fieldId}_hint`} isMobile={isMobile}>{hint}</StyledHint>}
-            {!valid && (
-                <InvalidField
-                    controlId={fieldId}
-                    feedbackMsg={validationErrorMessage}
-                    noIcon={noInvalidFieldIcon}
-                />
-            )}
-            {children}
-        </StyledDiv>
-    );
-};
diff --git a/packages/react/src/components/feedbacks/invalid-field.test.tsx b/packages/react/src/components/form/feedbacks/invalid-field.test.tsx
similarity index 81%
rename from packages/react/src/components/feedbacks/invalid-field.test.tsx
rename to packages/react/src/components/form/feedbacks/invalid-field.test.tsx
index 4f4a8ec302..8a625efd6f 100644
--- a/packages/react/src/components/feedbacks/invalid-field.test.tsx
+++ b/packages/react/src/components/form/feedbacks/invalid-field.test.tsx
@@ -1,4 +1,4 @@
-import { renderWithTheme } from '../../test-utils/renderer';
+import { renderWithTheme } from '../../../test-utils/renderer';
 import { InvalidField } from './invalid-field';
 
 describe('Invalid field', () => {
diff --git a/packages/react/src/components/feedbacks/invalid-field.test.tsx.snap b/packages/react/src/components/form/feedbacks/invalid-field.test.tsx.snap
similarity index 97%
rename from packages/react/src/components/feedbacks/invalid-field.test.tsx.snap
rename to packages/react/src/components/form/feedbacks/invalid-field.test.tsx.snap
index d047f8c241..e4d6ab8723 100644
--- a/packages/react/src/components/feedbacks/invalid-field.test.tsx.snap
+++ b/packages/react/src/components/form/feedbacks/invalid-field.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`Invalid field Matches the snapshot 1`] = `
   aria-live="polite"
   class="c0"
   data-testid="invalid-field"
-  id="test-id_invalid"
+  id="test-id"
   role="alert"
 >
   <svg
diff --git a/packages/react/src/components/feedbacks/invalid-field.tsx b/packages/react/src/components/form/feedbacks/invalid-field.tsx
similarity index 86%
rename from packages/react/src/components/feedbacks/invalid-field.tsx
rename to packages/react/src/components/form/feedbacks/invalid-field.tsx
index 9100dc9aa2..5e27259277 100644
--- a/packages/react/src/components/feedbacks/invalid-field.tsx
+++ b/packages/react/src/components/form/feedbacks/invalid-field.tsx
@@ -1,7 +1,7 @@
 import { VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
-import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { Icon } from '../icon/icon';
+import { useDeviceContext } from '../../device-context-provider/device-context-provider';
+import { Icon } from '../../icon/icon';
 
 const Field = styled.span<{ isMobile: boolean }>`
     color: ${(props) => props.theme.component['field-error-text-color']};
@@ -19,7 +19,7 @@ const StyledIcon = styled(Icon)`
 `;
 
 interface InvalidFieldProps {
-    controlId: string;
+    controlId?: string;
     feedbackMsg: string;
     noIcon?: boolean;
 }
@@ -31,7 +31,7 @@ const InvalidField: VoidFunctionComponent<InvalidFieldProps> = ({ controlId, fee
         <Field
             data-testid="invalid-field"
             aria-live="polite"
-            id={`${controlId}_invalid`}
+            id={controlId}
             isMobile={isMobile}
             role="alert"
         >
diff --git a/packages/react/src/components/form/form-container/form-field-container.test.tsx b/packages/react/src/components/form/form-container/form-field-container.test.tsx
new file mode 100644
index 0000000000..cc0b982b23
--- /dev/null
+++ b/packages/react/src/components/form/form-container/form-field-container.test.tsx
@@ -0,0 +1,318 @@
+import { renderWithProviders } from '../../../test-utils/renderer';
+import { devConsole } from '../../../utils/dev-console';
+import { Input } from '../../text-input/styles/inputs';
+import { ARIA_LABEL_WARNING } from '../utils';
+import { FormFieldContainer } from './form-field-container';
+
+describe('Form Field Container', () => {
+    describe('Styling', () => {
+        const defaultProps = {
+            id: 'id',
+            validationErrorMessage: 'This text area input is invalid',
+        };
+
+        test('matches default snapshot', () => {
+            const tree = renderWithProviders(
+                <FormFieldContainer {...defaultProps}>
+                    Children
+                </FormFieldContainer>,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
+
+        test('matches invalid snapshot', () => {
+            const tree = renderWithProviders(
+                <FormFieldContainer {...defaultProps} valid={false}>
+                    Children
+                </FormFieldContainer>,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
+
+        test('match noMargin snapshot', () => {
+            const tree = renderWithProviders(
+                <FormFieldContainer noMargin {...defaultProps}>
+                    Children
+                </FormFieldContainer>,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
+    });
+
+    describe('Accessibility', () => {
+        const label = 'This is a label.';
+        const ariaLabel = 'This is a ariaLabel.';
+        const providedId = 'id';
+        const hint = 'This is a hint.';
+        const invalidMessage = 'This is invalid.';
+        const additionalElementId = 'idAdditionalElement';
+
+        test('should log if one of label props is missing', () => {
+            const consoleSpy = jest.spyOn(devConsole, 'warn');
+            consoleSpy.mockImplementation(() => {});
+            const wrapper = renderWithProviders(
+                <FormFieldContainer id={providedId} validationErrorMessage={invalidMessage}>
+                    <Input />
+                </FormFieldContainer>,
+            );
+
+            const inputWrapper = wrapper.find('input');
+            expect(inputWrapper.prop('aria-label')).toBe(undefined);
+            expect(inputWrapper.prop('aria-labelledby')).toBe(undefined);
+            expect(inputWrapper.prop('aria-describedby')).toBe(undefined);
+            expect(consoleSpy).toHaveBeenCalledTimes(1);
+            expect(consoleSpy).toHaveBeenCalledWith(ARIA_LABEL_WARNING);
+            consoleSpy.mockRestore();
+        });
+
+        test('should log if more than one label props is provided', () => {
+            const consoleSpy = jest.spyOn(devConsole, 'warn');
+            consoleSpy.mockImplementation(() => {});
+            const wrapper = renderWithProviders(
+                <FormFieldContainer
+                    ariaLabel={ariaLabel}
+                    ariaLabelledby={additionalElementId}
+                    ariaDescribedby={additionalElementId}
+                    label={label}
+                    id={providedId}
+                    hint={hint}
+                    validationErrorMessage={invalidMessage}
+                >
+                    <Input />
+                </FormFieldContainer>,
+            );
+
+            const inputWrapper = wrapper.find('input');
+            expect(inputWrapper.prop('aria-label')).toBe(undefined);
+            expect(inputWrapper.prop('aria-labelledby')).toBe(`${providedId}_label ${additionalElementId}`);
+            expect(inputWrapper.prop('aria-describedby')).toBe(`${providedId}_hint ${additionalElementId}`);
+            expect(consoleSpy).toHaveBeenCalledTimes(1);
+            expect(consoleSpy).toHaveBeenCalledWith(ARIA_LABEL_WARNING);
+            consoleSpy.mockRestore();
+        });
+
+        test('should override parent label props if provided to child input', () => {
+            const consoleSpy = jest.spyOn(devConsole, 'warn');
+            consoleSpy.mockImplementation(() => {});
+            const wrapper = renderWithProviders(
+                <FormFieldContainer
+                    ariaLabel={`${ariaLabel}_Parent`}
+                    ariaLabelledby={`${additionalElementId}_Parent`}
+                    ariaDescribedby={`${additionalElementId}_Parent`}
+                    label={label}
+                    id={providedId}
+                    hint={hint}
+                    validationErrorMessage={invalidMessage}
+                >
+                    <Input
+                        ariaLabel={`${ariaLabel}_Child`}
+                        ariaLabelledby={`${additionalElementId}_Child`}
+                        ariaDescribedby={`${additionalElementId}_Child`}
+                    />
+                </FormFieldContainer>,
+            );
+
+            const inputWrapper = wrapper.find('input');
+            expect(inputWrapper.prop('aria-label')).toBe(`${ariaLabel}_Child`);
+            expect(inputWrapper.prop('aria-labelledby')).toBe(undefined);
+            expect(inputWrapper.prop('aria-describedby')).toBe(`${additionalElementId}_Child`);
+            expect(consoleSpy).toHaveBeenCalledTimes(1);
+            expect(consoleSpy).toHaveBeenCalledWith(ARIA_LABEL_WARNING);
+            consoleSpy.mockRestore();
+        });
+
+        describe('aria-label', () => {
+            test('should log when both label and ariaLabel are provided', () => {
+                const consoleSpy = jest.spyOn(devConsole, 'warn');
+                consoleSpy.mockImplementation(() => {});
+                const wrapper = renderWithProviders(
+                    <FormFieldContainer
+                        ariaLabel={ariaLabel}
+                        label={label}
+                        id={providedId}
+                        validationErrorMessage={invalidMessage}
+                    >
+                        <Input />
+                    </FormFieldContainer>,
+                );
+
+                const inputWrapper = wrapper.find('input');
+                expect(inputWrapper.prop('aria-label')).toBe(undefined);
+                expect(inputWrapper.prop('aria-labelledby')).toBe(`${providedId}_label`);
+                expect(inputWrapper.prop('aria-describedby')).toBe(undefined);
+                expect(consoleSpy).toHaveBeenCalledTimes(1);
+                expect(consoleSpy).toHaveBeenCalledWith(ARIA_LABEL_WARNING);
+                consoleSpy.mockRestore();
+            });
+        });
+
+        describe('aria-labelledby', () => {
+            test('should contain idLabel when label provided', () => {
+                const consoleSpy = jest.spyOn(devConsole, 'warn');
+                consoleSpy.mockImplementation(() => {});
+                const wrapper = renderWithProviders(
+                    <FormFieldContainer label={label} id={providedId} validationErrorMessage={invalidMessage}>
+                        <Input />
+                    </FormFieldContainer>,
+                );
+
+                const inputWrapper = wrapper.find('input');
+                expect(inputWrapper.prop('aria-label')).toBe(undefined);
+                expect(inputWrapper.prop('aria-labelledby')).toBe(`${providedId}_label`);
+                expect(inputWrapper.prop('aria-describedby')).toBe(undefined);
+                expect(consoleSpy).toHaveBeenCalledTimes(0);
+                consoleSpy.mockRestore();
+            });
+
+            test('should contain idAdditionalElement when ariaLabelledBy provided', () => {
+                const consoleSpy = jest.spyOn(devConsole, 'warn');
+                consoleSpy.mockImplementation(() => {});
+                const wrapper = renderWithProviders(
+                    <FormFieldContainer
+                        id={providedId}
+                        validationErrorMessage=""
+                        ariaLabelledby={additionalElementId}
+                    >
+                        <Input />
+                    </FormFieldContainer>,
+                );
+
+                const inputWrapper = wrapper.find('input');
+                expect(inputWrapper.prop('aria-label')).toBe(undefined);
+                expect(inputWrapper.prop('aria-labelledby')).toBe(`${additionalElementId}`);
+                expect(inputWrapper.prop('aria-describedby')).toBe(undefined);
+                expect(consoleSpy).toHaveBeenCalledTimes(0);
+                consoleSpy.mockRestore();
+            });
+        });
+
+        describe('aria-describedby', () => {
+            test('should contain idHint when hint provided', () => {
+                const consoleSpy = jest.spyOn(devConsole, 'warn');
+                consoleSpy.mockImplementation(() => {});
+                const wrapper = renderWithProviders(
+                    <FormFieldContainer label={label} hint={hint} id={providedId} validationErrorMessage="">
+                        <Input />
+                    </FormFieldContainer>,
+                );
+
+                const inputWrapper = wrapper.find('input');
+                expect(inputWrapper.prop('aria-label')).toBe(undefined);
+                expect(inputWrapper.prop('aria-labelledby')).toBe(`${providedId}_label`);
+                expect(inputWrapper.prop('aria-describedby')).toBe(`${providedId}_hint`);
+                expect(consoleSpy).toHaveBeenCalledTimes(0);
+                consoleSpy.mockRestore();
+            });
+
+            test('shouldn\'t contain idInvalid when FormContainer is valid', () => {
+                const consoleSpy = jest.spyOn(devConsole, 'warn');
+                consoleSpy.mockImplementation(() => {});
+                const wrapper = renderWithProviders(
+                    <FormFieldContainer label={label} id={providedId} validationErrorMessage={invalidMessage}>
+                        <Input />
+                    </FormFieldContainer>,
+                );
+
+                const inputWrapper = wrapper.find('input');
+                expect(inputWrapper.prop('aria-label')).toBe(undefined);
+                expect(inputWrapper.prop('aria-labelledby')).toBe(`${providedId}_label`);
+                expect(inputWrapper.prop('aria-describedby')).toBe(undefined);
+                expect(consoleSpy).toHaveBeenCalledTimes(0);
+                consoleSpy.mockRestore();
+            });
+
+            test('should contain idInvalid when FormContainer is invalid', () => {
+                const consoleSpy = jest.spyOn(devConsole, 'warn');
+                consoleSpy.mockImplementation(() => {});
+                const wrapper = renderWithProviders(
+                    <FormFieldContainer
+                        label={label}
+                        id={providedId}
+                        valid={false}
+                        validationErrorMessage={invalidMessage}
+                    >
+                        <Input />
+                    </FormFieldContainer>,
+                );
+
+                const inputWrapper = wrapper.find('input');
+                expect(inputWrapper.prop('aria-label')).toBe(undefined);
+                expect(inputWrapper.prop('aria-labelledby')).toBe(`${providedId}_label`);
+                expect(inputWrapper.prop('aria-describedby')).toBe(`${providedId}_invalid`);
+                expect(consoleSpy).toHaveBeenCalledTimes(0);
+                consoleSpy.mockRestore();
+            });
+
+            test('should contain idAdditionalElement when ariaDescribedBy provided', () => {
+                const consoleSpy = jest.spyOn(devConsole, 'warn');
+                consoleSpy.mockImplementation(() => {});
+                const wrapper = renderWithProviders(
+                    <FormFieldContainer
+                        label={label}
+                        id={providedId}
+                        hint={hint}
+                        validationErrorMessage=""
+                        ariaDescribedby={additionalElementId}
+                    >
+                        <Input />
+                    </FormFieldContainer>,
+                );
+
+                const inputWrapper = wrapper.find('input');
+                expect(inputWrapper.prop('aria-label')).toBe(undefined);
+                expect(inputWrapper.prop('aria-labelledby')).toBe(`${providedId}_label`);
+                expect(inputWrapper.prop('aria-describedby')).toBe(`${providedId}_hint ${additionalElementId}`);
+                expect(consoleSpy).toHaveBeenCalledTimes(0);
+                consoleSpy.mockRestore();
+            });
+        });
+
+        describe('aria-invalid', () => {
+            test('should be true when Formfield is invalid', () => {
+                const wrapper = renderWithProviders(
+                    <FormFieldContainer
+                        label={label}
+                        hint={hint}
+                        id={providedId}
+                        valid={false}
+                        validationErrorMessage=""
+                    >
+                        <Input />
+                    </FormFieldContainer>,
+                );
+
+                const inputWrapper = wrapper.find('input');
+                expect(inputWrapper.prop('aria-invalid')).toBe('true');
+            });
+        });
+
+        describe('aria-required', () => {
+            test('should be true when Formfield is required', () => {
+                const wrapper = renderWithProviders(
+                    <FormFieldContainer label={label} hint={hint} id={providedId} required validationErrorMessage="">
+                        <Input />
+                    </FormFieldContainer>,
+                );
+
+                const inputWrapper = wrapper.find('input');
+                expect(inputWrapper.prop('aria-required')).toBe('true');
+            });
+        });
+
+        describe('aria-disabled', () => {
+            test('should be true when FormContainer is disabled', () => {
+                const wrapper = renderWithProviders(
+                    <FormFieldContainer label={label} hint={hint} id={providedId} disabled validationErrorMessage="">
+                        <Input />
+                    </FormFieldContainer>,
+                );
+
+                const inputWrapper = wrapper.find('input');
+                expect(inputWrapper.prop('aria-disabled')).toBe('true');
+            });
+        });
+    });
+});
diff --git a/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap b/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap
new file mode 100644
index 0000000000..8877ef1137
--- /dev/null
+++ b/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap
@@ -0,0 +1,241 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form Field Container Styling match noMargin snapshot 1`] = `
+.c0 {
+  margin: 0;
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0:focus {
+  border-color: #006296;
+}
+
+.c0 > :nth-child(0) {
+  margin-bottom: var(--spacing-half);
+}
+
+<div
+  class="c0"
+>
+  Children
+</div>
+`;
+
+exports[`Form Field Container Styling matches default snapshot 1`] = `
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0:focus {
+  border-color: #006296;
+}
+
+.c0 > :nth-child(0) {
+  margin-bottom: var(--spacing-half);
+}
+
+<div
+  class="c0"
+>
+  Children
+</div>
+`;
+
+exports[`Form Field Container Styling matches invalid snapshot 1`] = `
+.c1 {
+  color: #CD2C23;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+.c2 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: var(--spacing-base);
+}
+
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #CD2C23;
+}
+
+.c0:focus {
+  border-color: #CD2C23;
+}
+
+.c0 > :nth-child(1) {
+  margin-bottom: var(--spacing-half);
+}
+
+<div
+  class="c0"
+>
+  <span
+    aria-live="polite"
+    class="c1"
+    data-testid="invalid-field"
+    id="id_invalid"
+    role="alert"
+  >
+    <svg
+      class="c2"
+      color="currentColor"
+      focusable="false"
+      height="16"
+      width="16"
+    />
+    This text area input is invalid
+  </span>
+  Children
+</div>
+`;
+
+exports[`Form Field Styling match noMargin snapshot 1`] = `
+.c0 {
+  margin: 0;
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0:focus {
+  border-color: #006296;
+}
+
+.c0 > :nth-child(0) {
+  margin-bottom: var(--spacing-half);
+}
+
+<div
+  class="c0"
+>
+  Children
+</div>
+`;
+
+exports[`Form Field Styling matches default snapshot 1`] = `
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0:focus {
+  border-color: #006296;
+}
+
+.c0 > :nth-child(0) {
+  margin-bottom: var(--spacing-half);
+}
+
+<div
+  class="c0"
+>
+  Children
+</div>
+`;
+
+exports[`Form Field Styling matches invalid snapshot 1`] = `
+.c1 {
+  color: #CD2C23;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+.c2 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: var(--spacing-base);
+}
+
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #CD2C23;
+}
+
+.c0:focus {
+  border-color: #CD2C23;
+}
+
+.c0 > :nth-child(1) {
+  margin-bottom: var(--spacing-half);
+}
+
+<div
+  class="c0"
+>
+  <span
+    aria-live="polite"
+    class="c1"
+    data-testid="invalid-field"
+    id="id_invalid"
+    role="alert"
+  >
+    <svg
+      class="c2"
+      color="currentColor"
+      focusable="false"
+      height="16"
+      width="16"
+    />
+    This text area input is invalid
+  </span>
+  Children
+</div>
+`;
diff --git a/packages/react/src/components/form/form-container/form-field-container.tsx b/packages/react/src/components/form/form-container/form-field-container.tsx
new file mode 100644
index 0000000000..0168406e72
--- /dev/null
+++ b/packages/react/src/components/form/form-container/form-field-container.tsx
@@ -0,0 +1,134 @@
+import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
+import styled from 'styled-components';
+import { useId } from '../../../hooks/use-id';
+import { ResolvedTheme } from '../../../themes/theme';
+import { useDeviceContext } from '../../device-context-provider/device-context-provider';
+import { InvalidField } from '../feedbacks/invalid-field';
+import { Label } from '../../label/label';
+import { TooltipProps } from '../../tooltip/tooltip';
+import { FormFieldContext, FormFieldControlProps } from '../form-field-context';
+import { getAriaDescribedBy, getAriaLabel, getAriaLabelledBy, getSlotIds } from '../utils';
+
+interface StyledDivProps {
+    theme: ResolvedTheme;
+    hasLabel: boolean;
+    hasHint: boolean;
+    valid: boolean;
+    noMargin?: boolean;
+}
+
+const StyledDiv = styled.div<StyledDivProps>`
+    margin: ${({ noMargin }) => (noMargin ? '0' : '0 0 var(--spacing-3x)')};
+
+    input,
+    select,
+    textarea {
+        border-color: ${({ theme, valid }) => (valid ? theme.component['field-input-border-color'] : theme.component['field-input-error-border-color'])};
+    }
+
+    &:focus {
+        border-color: ${({ theme, valid }) => (valid ? theme.component['field-input-focus-border-color'] : theme.component['field-input-error-focus-border-color'])};
+    }
+
+    > :nth-child(${({ hasLabel, hasHint, valid }) => (hasLabel ? 1 : 0) + (hasHint ? 1 : 0) + (!valid ? 1 : 0)}) {
+        margin-bottom: var(--spacing-half);
+    }
+`;
+
+const StyledHint = styled.span<{ isMobile: boolean }>`
+    color: ${(props) => props.theme.component['field-hint-text-color']};
+    display: block;
+    font-size: ${({ isMobile }) => (isMobile ? '0.875rem' : '0.75rem')};
+    font-weight: var(--font-normal);
+    letter-spacing: 0.02rem;
+    line-height: ${({ isMobile }) => (isMobile ? '1.5rem' : '1.25rem')};
+`;
+
+export interface FormFieldContainerProps extends FormFieldControlProps {
+    className?: string;
+    id?: string;
+    noInvalidFieldIcon?: boolean;
+    noMargin?: boolean;
+    tooltip?: TooltipProps;
+    label?: string;
+    hint?: string;
+    validationErrorMessage: string;
+}
+
+export const FormFieldContainer: FunctionComponent<PropsWithChildren<FormFieldContainerProps>> = ({
+    id: providedId,
+    ariaLabel: providedAriaLabel,
+    ariaLabelledby: providedAriaLabelledby,
+    ariaDescribedby: providedAriaDescribedby,
+    children,
+    className,
+    disabled = false,
+    hint,
+    label,
+    noInvalidFieldIcon,
+    noMargin,
+    required = false,
+    tooltip,
+    valid = true,
+    validationErrorMessage,
+    ...props
+}) => {
+    const { isMobile } = useDeviceContext();
+    const formId = useId(providedId);
+    const slotIds = getSlotIds(formId, label, hint, (validationErrorMessage && !valid));
+
+    const ariaLabel = getAriaLabel(label, providedAriaLabel, providedAriaLabelledby);
+    const ariaLabelledby = getAriaLabelledBy(slotIds, providedAriaLabelledby);
+    const ariaDescribedby = getAriaDescribedBy(slotIds, providedAriaDescribedby);
+
+    const contextValues = useMemo(() => ({
+        formId,
+        ariaLabel,
+        ariaLabelledby,
+        ariaDescribedby,
+        valid,
+        hint,
+        required,
+        disabled,
+    }), [formId, ariaLabel, ariaLabelledby, ariaDescribedby, valid, hint, required, disabled]);
+
+    return (
+        <FormFieldContext.Provider value={contextValues}>
+            <StyledDiv
+                className={className}
+                noMargin={noMargin}
+                hasLabel={!!label}
+                hasHint={!!hint}
+                valid={valid}
+                {...props /* eslint-disable-line react/jsx-props-no-spreading */}
+            >
+                {label && (
+                <Label
+                    id={slotIds.label}
+                    forId={formId}
+                    tooltip={tooltip}
+                    required={required}
+                >
+                    {label}
+                </Label>
+            )}
+                {hint && (
+                <StyledHint
+                    id={slotIds.hint}
+                    isMobile={isMobile}
+                >
+                    {hint}
+                </StyledHint>
+            )}
+                {!valid && (
+                <InvalidField
+                    controlId={slotIds.invalid}
+                    feedbackMsg={validationErrorMessage}
+                    noIcon={noInvalidFieldIcon}
+                />
+            )}
+                {children}
+            </StyledDiv>
+        </FormFieldContext.Provider>
+    );
+};
diff --git a/packages/react/src/components/form/form-field-context.ts b/packages/react/src/components/form/form-field-context.ts
new file mode 100644
index 0000000000..d06906c66e
--- /dev/null
+++ b/packages/react/src/components/form/form-field-context.ts
@@ -0,0 +1,39 @@
+import { createContext, useContext } from 'react';
+
+export interface FormFieldControlProps {
+    formId?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string
+    disabled?: boolean;
+    required?: boolean;
+    valid?: boolean;
+}
+
+export const FormFieldContext = createContext<FormFieldControlProps>({});
+
+function applyDefault<T>(fields: T, defaults: T, keys: (keyof T)[]): T {
+    const result = <T>{};
+    keys.forEach((key) => {
+        result[key] = fields[key] === undefined ? defaults[key] : fields[key];
+    });
+    return result;
+}
+
+export function useFormFieldContext(props: FormFieldControlProps): FormFieldControlProps {
+    const context = useContext(FormFieldContext);
+
+    return applyDefault(
+        props,
+        context,
+        [
+            'formId',
+            'ariaLabel',
+            'ariaLabelledby',
+            'ariaDescribedby',
+            'valid',
+            'required',
+            'disabled',
+        ],
+    );
+}
diff --git a/packages/react/src/components/form/utils.ts b/packages/react/src/components/form/utils.ts
new file mode 100644
index 0000000000..3fb12c1559
--- /dev/null
+++ b/packages/react/src/components/form/utils.ts
@@ -0,0 +1,71 @@
+import { devConsole } from '../../utils/dev-console';
+
+interface FormFieldIds {
+    label?: string;
+    hint?: string;
+    invalid?: string;
+}
+
+function makeSlotId(prop: React.ReactNode, formFieldId: string, propName: string): string | undefined {
+    if (!prop) {
+        return undefined;
+    }
+
+    return `${formFieldId}_${propName}`;
+}
+
+export function getSlotIds(
+    formFieldId: string,
+    label?: React.ReactNode,
+    hint?: React.ReactNode,
+    invalid?: React.ReactNode,
+): FormFieldIds {
+    return {
+        label: makeSlotId(label, formFieldId, 'label'),
+        hint: makeSlotId(hint, formFieldId, 'hint'),
+        invalid: makeSlotId(invalid, formFieldId, 'invalid'),
+    };
+}
+
+export const ARIA_LABEL_WARNING = ''
+    + 'label, aria-label and aria-labelledby are mutually exclusive properties. Only one should be provided.';
+
+export const validateAriaLabels = (
+    label?: string,
+    ariaLabel?: string,
+    ariaLabelledby?: string,
+): boolean => {
+    const labelCount = [!!label, !!ariaLabel, !!ariaLabelledby].filter(Boolean).length;
+    if (labelCount === 0 || labelCount > 1) {
+        devConsole.warn(ARIA_LABEL_WARNING);
+        return false;
+    }
+    return true;
+};
+
+export function joinStrings(...strings: Array<string | undefined>): string | undefined {
+    const filteredStrings = strings.filter(Boolean);
+    return filteredStrings.length > 0 ? filteredStrings.join(' ') : undefined;
+}
+
+export function getAriaLabel(
+    label?: string,
+    ariaLabel?: string,
+    ariaLabelledby?: string,
+): string | undefined {
+    return validateAriaLabels(label, ariaLabel, ariaLabelledby) ? ariaLabel : undefined;
+}
+
+export function getAriaLabelledBy(
+    { label }: FormFieldIds,
+    additionalLabelledBy?: string,
+): string | undefined {
+    return joinStrings(label, additionalLabelledBy);
+}
+
+export function getAriaDescribedBy(
+    { invalid, hint }: FormFieldIds,
+    additionalDescribedBy?: string,
+): string | undefined {
+    return joinStrings(invalid, hint, additionalDescribedBy);
+}
diff --git a/packages/react/src/components/numeric-input/numeric-input.tsx b/packages/react/src/components/numeric-input/numeric-input.tsx
index 637ea20cac..912f1a608b 100644
--- a/packages/react/src/components/numeric-input/numeric-input.tsx
+++ b/packages/react/src/components/numeric-input/numeric-input.tsx
@@ -10,7 +10,7 @@ import { useId } from '../../hooks/use-id';
 import { focus } from '../../utils/css-state';
 import { ResolvedTheme } from '../../themes/theme';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FormFieldContainer } from '../form/form-container/form-field-container';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
 import { useNumericInput, UseNumericInputParams } from './use-numeric-input';
@@ -144,9 +144,9 @@ export const NumericInput: VoidFunctionComponent<NumericInputProps> = ({
     ), [adornment, adornmentPosition]);
 
     return (
-        <FieldContainer
+        <FormFieldContainer
             className={className}
-            fieldId={fieldId}
+            id={fieldId}
             hint={hint}
             label={label}
             tooltip={tooltip}
@@ -175,6 +175,6 @@ export const NumericInput: VoidFunctionComponent<NumericInputProps> = ({
                 />
                 {(adornment && adornmentPosition === 'end') && adornmentContent}
             </Wrapper>
-        </FieldContainer>
+        </FormFieldContainer>
     );
 };
diff --git a/packages/react/src/components/password-creation-input/password-creation-input.tsx b/packages/react/src/components/password-creation-input/password-creation-input.tsx
index a42894dd0e..e6760af0bd 100644
--- a/packages/react/src/components/password-creation-input/password-creation-input.tsx
+++ b/packages/react/src/components/password-creation-input/password-creation-input.tsx
@@ -1,6 +1,6 @@
 import { ChangeEvent, useState, VoidFunctionComponent, useMemo } from 'react';
 import styled, { StyledProps } from 'styled-components';
-import { FieldContainer } from '../field-container/field-container';
+import { FormFieldContainer } from '../form/form-container/form-field-container';
 import { IconButton } from '../buttons/icon-button';
 import { TextInput } from '../text-input/text-input';
 import { useTranslation } from '../../i18n/use-translation';
@@ -12,7 +12,7 @@ import { v4 as uuid } from '../../utils/uuid';
 import { PasswordStrengthContainer } from './password-strength-container';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 
-const StyledFieldContainer = styled(FieldContainer)`
+const StyledFieldContainer = styled(FormFieldContainer)`
     > :nth-child(2) {
         margin-bottom: 0;
     }
@@ -123,7 +123,7 @@ export const PasswordCreationInput: VoidFunctionComponent<PasswordCreationInputP
 
     return (
         <StyledFieldContainer
-            fieldId={id}
+            id={id}
             label={t('create-password')}
             validationErrorMessage=""
             noInvalidFieldIcon
diff --git a/packages/react/src/components/password-input/password-input.tsx b/packages/react/src/components/password-input/password-input.tsx
index 06aff849fd..8fa3a162d2 100644
--- a/packages/react/src/components/password-input/password-input.tsx
+++ b/packages/react/src/components/password-input/password-input.tsx
@@ -1,6 +1,6 @@
 import { ChangeEvent, useState, VoidFunctionComponent, useMemo, FocusEvent, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { FieldContainer } from '../field-container/field-container';
+import { FormFieldContainer } from '../form/form-container/form-field-container';
 import { IconButton } from '../buttons/icon-button';
 import { TextInput } from '../text-input/text-input';
 import { useTranslation } from '../../i18n/use-translation';
@@ -102,8 +102,8 @@ export const PasswordInput: VoidFunctionComponent<PasswordInputProps> = ({
     }, [onChange]);
 
     return (
-        <FieldContainer
-            fieldId={id}
+        <FormFieldContainer
+            id={id}
             label={label}
             hint={hint}
             validationErrorMessage={validationErrorMessage ?? ''}
@@ -140,6 +140,6 @@ export const PasswordInput: VoidFunctionComponent<PasswordInputProps> = ({
                     />
                 </Tooltip>
             </PasswordContainer>
-        </FieldContainer>
+        </FormFieldContainer>
     );
 };
diff --git a/packages/react/src/components/stepper-input/stepper-input.tsx b/packages/react/src/components/stepper-input/stepper-input.tsx
index 41bf948e75..0f102b0738 100644
--- a/packages/react/src/components/stepper-input/stepper-input.tsx
+++ b/packages/react/src/components/stepper-input/stepper-input.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { v4 as uuid } from '../../utils/uuid';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FormFieldContainer } from '../form/form-container/form-field-container';
 import { responsiveInputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
 import { StepperButtons } from './stepper-buttons';
@@ -126,8 +126,8 @@ export const StepperInput: VoidFunctionComponent<StepperInputProps> = ({
     };
 
     return (
-        <FieldContainer
-            fieldId={fieldId}
+        <FormFieldContainer
+            id={fieldId}
             hint={hint}
             label={label}
             tooltip={tooltip}
@@ -161,6 +161,6 @@ export const StepperInput: VoidFunctionComponent<StepperInputProps> = ({
                     />
                 )}
             </Wrapper>
-        </FieldContainer>
+        </FormFieldContainer>
     );
 };
diff --git a/packages/react/src/components/text-area/text-area.tsx b/packages/react/src/components/text-area/text-area.tsx
index 23f296e849..d6cb603d72 100644
--- a/packages/react/src/components/text-area/text-area.tsx
+++ b/packages/react/src/components/text-area/text-area.tsx
@@ -4,7 +4,7 @@ import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { v4 as uuid } from '../../utils/uuid';
-import { FieldContainer } from '../field-container/field-container';
+import { FormFieldContainer } from '../form/form-container/form-field-container';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
 import { ScreenReaderOnlyText } from '../screen-reader-only-text/ScreenReaderOnlyText';
@@ -137,11 +137,11 @@ export const TextArea: VoidFunctionComponent<TextAreaProps> = ({
     ]);
 
     return (
-        <FieldContainer
+        <FormFieldContainer
             data-testid="container"
             className={className}
             noMargin={noMargin}
-            fieldId={idTextArea}
+            id={idTextArea}
             label={label}
             required={required}
             tooltip={tooltip}
@@ -176,6 +176,6 @@ export const TextArea: VoidFunctionComponent<TextAreaProps> = ({
                     <span aria-hidden="true">{t('characters', { length: inputValueLength, max: maxLength })}</span>
                 </Counter>
             )}
-        </FieldContainer>
+        </FormFieldContainer>
     );
 };
diff --git a/packages/react/src/components/text-input/styles/inputs.tsx b/packages/react/src/components/text-input/styles/inputs.tsx
index a214ed7656..0d6eaf951b 100644
--- a/packages/react/src/components/text-input/styles/inputs.tsx
+++ b/packages/react/src/components/text-input/styles/inputs.tsx
@@ -1,7 +1,10 @@
-import { css, FlattenSimpleInterpolation } from 'styled-components';
+import { DetailedHTMLProps, forwardRef, InputHTMLAttributes, ReactElement, Ref } from 'react';
+import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
+import { useId } from '../../../hooks/use-id';
 import { ResolvedTheme } from '../../../themes/theme';
 import { focus } from '../../../utils/css-state';
-import { DeviceContextProps } from '../../device-context-provider/device-context-provider';
+import { DeviceContextProps, useDeviceContext } from '../../device-context-provider/device-context-provider';
+import { FormFieldControlProps, useFormFieldContext } from '../../form/form-field-context';
 
 export const inputsStyle: (theme: ResolvedTheme, isMobile?: boolean) => FlattenSimpleInterpolation = (
     theme: ResolvedTheme,
@@ -77,3 +80,80 @@ export const responsiveInputsStyle = ({ theme, device: { isMobile } }: Responsiv
 
     ${focus({ theme }, true)}
 `;
+
+const StyledInput = styled.input<{ isMobile: boolean; }>`
+    ${({ theme, isMobile }) => inputsStyle(theme, isMobile)}
+`;
+
+type PartialInputProps = Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+    | 'id'
+    | 'className'
+    | 'type'
+    | 'name'
+    | 'value'
+    | 'defaultValue'
+    | 'placeholder'
+    | 'disabled'
+    | 'required'
+    | 'pattern'
+    | 'onBlur'
+    | 'onChange'
+    | 'onClick'
+    | 'onFocus'
+    | 'onKeyUp'
+    | 'onKeyDown'
+    | 'onMouseUp'
+    | 'onInvalid'
+    | 'inputMode'
+    | 'autoComplete'
+>;
+
+type PartialFormFieldProps = Pick<FormFieldControlProps,
+    | 'ariaLabel'
+    | 'ariaLabelledby'
+    | 'ariaDescribedby'
+    | 'valid'
+>;
+
+export type InputProps = PartialInputProps & PartialFormFieldProps;
+
+export const Input = forwardRef(({
+    id: providedId,
+    valid: providedValid = true,
+    required: providedRequired = false,
+    disabled: providedDisabled = false,
+    ...otherProps
+}: InputProps, ref: Ref<HTMLInputElement>): ReactElement => {
+    const { isMobile } = useDeviceContext();
+    const inputId = useId(providedId);
+
+    const {
+        formId,
+        ariaLabel,
+        ariaLabelledby,
+        ariaDescribedby,
+        valid = providedValid,
+        required = providedRequired,
+        disabled = providedDisabled,
+    } = useFormFieldContext(otherProps);
+
+    return (
+        <StyledInput
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabel ? undefined : ariaLabelledby}
+            aria-describedby={ariaDescribedby}
+            aria-disabled={disabled ? 'true' : 'false'}
+            aria-required={required ? 'true' : 'false'}
+            aria-invalid={valid ? 'false' : 'true'}
+            data-testid="input"
+            id={formId || inputId}
+            disabled={disabled}
+            required={required}
+            isMobile={isMobile}
+            ref={ref}
+            {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
+        />
+    );
+});
+
+Input.displayName = 'Input';
diff --git a/packages/react/src/components/text-input/text-input.tsx b/packages/react/src/components/text-input/text-input.tsx
index 96cacca054..71ecf8c196 100644
--- a/packages/react/src/components/text-input/text-input.tsx
+++ b/packages/react/src/components/text-input/text-input.tsx
@@ -17,7 +17,7 @@ import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FormFieldContainer } from '../form/form-container/form-field-container';
 import { TooltipProps } from '../tooltip/tooltip';
 import { inputsStyle } from './styles/inputs';
 import { useAriaConditionalIds } from '../../hooks/use-aria-conditional-ids';
@@ -138,10 +138,10 @@ export const TextInput = forwardRef(({
     }, [valid]);
 
     return (
-        <FieldContainer
+        <FormFieldContainer
             className={className}
             noMargin={noMargin}
-            fieldId={fieldId}
+            id={fieldId}
             label={label}
             required={required}
             tooltip={tooltip}
@@ -176,7 +176,7 @@ export const TextInput = forwardRef(({
                 value={value}
                 {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
             />
-        </FieldContainer>
+        </FormFieldContainer>
     );
 });
 

From a62ebb42fe2d6ffd723a53da9f8b5e040cc7dbf6 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Fri, 26 Apr 2024 15:16:45 -0400
Subject: [PATCH 02/23] chore(form-field): update snapshots

---
 .../form-field-container.test.tsx.snap        | 124 ------------------
 .../form-container/form-field-container.tsx   |   4 -
 .../components/text-input/styles/inputs.tsx   |   2 +-
 3 files changed, 1 insertion(+), 129 deletions(-)

diff --git a/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap b/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap
index 8877ef1137..3b4f2540a5 100644
--- a/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap
+++ b/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap
@@ -37,10 +37,6 @@ exports[`Form Field Container Styling matches default snapshot 1`] = `
   border-color: #60666E;
 }
 
-.c0:focus {
-  border-color: #006296;
-}
-
 .c0 > :nth-child(0) {
   margin-bottom: var(--spacing-half);
 }
@@ -119,123 +115,3 @@ exports[`Form Field Container Styling matches invalid snapshot 1`] = `
   Children
 </div>
 `;
-
-exports[`Form Field Styling match noMargin snapshot 1`] = `
-.c0 {
-  margin: 0;
-}
-
-.c0 input,
-.c0 select,
-.c0 textarea {
-  border-color: #60666E;
-}
-
-.c0:focus {
-  border-color: #006296;
-}
-
-.c0 > :nth-child(0) {
-  margin-bottom: var(--spacing-half);
-}
-
-<div
-  class="c0"
->
-  Children
-</div>
-`;
-
-exports[`Form Field Styling matches default snapshot 1`] = `
-.c0 {
-  margin: 0 0 var(--spacing-3x);
-}
-
-.c0 input,
-.c0 select,
-.c0 textarea {
-  border-color: #60666E;
-}
-
-.c0:focus {
-  border-color: #006296;
-}
-
-.c0 > :nth-child(0) {
-  margin-bottom: var(--spacing-half);
-}
-
-<div
-  class="c0"
->
-  Children
-</div>
-`;
-
-exports[`Form Field Styling matches invalid snapshot 1`] = `
-.c1 {
-  color: #CD2C23;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-}
-
-.c2 {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-right: var(--spacing-base);
-}
-
-.c0 {
-  margin: 0 0 var(--spacing-3x);
-}
-
-.c0 input,
-.c0 select,
-.c0 textarea {
-  border-color: #CD2C23;
-}
-
-.c0:focus {
-  border-color: #CD2C23;
-}
-
-.c0 > :nth-child(1) {
-  margin-bottom: var(--spacing-half);
-}
-
-<div
-  class="c0"
->
-  <span
-    aria-live="polite"
-    class="c1"
-    data-testid="invalid-field"
-    id="id_invalid"
-    role="alert"
-  >
-    <svg
-      class="c2"
-      color="currentColor"
-      focusable="false"
-      height="16"
-      width="16"
-    />
-    This text area input is invalid
-  </span>
-  Children
-</div>
-`;
diff --git a/packages/react/src/components/form/form-container/form-field-container.tsx b/packages/react/src/components/form/form-container/form-field-container.tsx
index 0168406e72..3d4ef8bd18 100644
--- a/packages/react/src/components/form/form-container/form-field-container.tsx
+++ b/packages/react/src/components/form/form-container/form-field-container.tsx
@@ -26,10 +26,6 @@ const StyledDiv = styled.div<StyledDivProps>`
         border-color: ${({ theme, valid }) => (valid ? theme.component['field-input-border-color'] : theme.component['field-input-error-border-color'])};
     }
 
-    &:focus {
-        border-color: ${({ theme, valid }) => (valid ? theme.component['field-input-focus-border-color'] : theme.component['field-input-error-focus-border-color'])};
-    }
-
     > :nth-child(${({ hasLabel, hasHint, valid }) => (hasLabel ? 1 : 0) + (hasHint ? 1 : 0) + (!valid ? 1 : 0)}) {
         margin-bottom: var(--spacing-half);
     }
diff --git a/packages/react/src/components/text-input/styles/inputs.tsx b/packages/react/src/components/text-input/styles/inputs.tsx
index 7136d98656..fa9abd2b8c 100644
--- a/packages/react/src/components/text-input/styles/inputs.tsx
+++ b/packages/react/src/components/text-input/styles/inputs.tsx
@@ -91,7 +91,7 @@ export const responsiveInputsStyle = ({ theme, device: { isMobile } }: Responsiv
 `;
 
 const StyledInput = styled.input<{ isMobile: boolean; }>`
-    ${({ theme, isMobile }) => inputsStyle(theme, isMobile)}
+    ${({ theme, isMobile }) => inputsStyle({ theme, isMobile })}
 `;
 
 type PartialInputProps = Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,

From aac841df6536cc584b4ee6267bbe689c060efa77 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Fri, 26 Apr 2024 15:25:20 -0400
Subject: [PATCH 03/23] chore(form-field): update snapshots

---
 .../form-container/form-field-container.test.tsx.snap     | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap b/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap
index 3b4f2540a5..c91fb3b3da 100644
--- a/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap
+++ b/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap
@@ -11,10 +11,6 @@ exports[`Form Field Container Styling match noMargin snapshot 1`] = `
   border-color: #60666E;
 }
 
-.c0:focus {
-  border-color: #006296;
-}
-
 .c0 > :nth-child(0) {
   margin-bottom: var(--spacing-half);
 }
@@ -85,10 +81,6 @@ exports[`Form Field Container Styling matches invalid snapshot 1`] = `
   border-color: #CD2C23;
 }
 
-.c0:focus {
-  border-color: #CD2C23;
-}
-
 .c0 > :nth-child(1) {
   margin-bottom: var(--spacing-half);
 }

From cfb44ab1c400718abd17b2e6512d29e2d6857352 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 6 Jun 2024 16:31:37 -0400
Subject: [PATCH 04/23] chore(form-field): post review changes

---
 .../form-field-container.test.tsx             | 109 +++++++++++++++++-
 .../form-container/form-field-container.tsx   |  84 +++++++-------
 .../src/components/form/form-field-context.ts |  31 ++---
 packages/react/src/components/form/utils.ts   |  39 +++----
 .../components/text-input/styles/inputs.tsx   |  12 +-
 packages/react/src/utils/string.test.ts       |  16 ++-
 packages/react/src/utils/string.ts            |   5 +
 7 files changed, 194 insertions(+), 102 deletions(-)

diff --git a/packages/react/src/components/form/form-container/form-field-container.test.tsx b/packages/react/src/components/form/form-container/form-field-container.test.tsx
index cc0b982b23..abf9730a03 100644
--- a/packages/react/src/components/form/form-container/form-field-container.test.tsx
+++ b/packages/react/src/components/form/form-container/form-field-container.test.tsx
@@ -1,7 +1,15 @@
 import { renderWithProviders } from '../../../test-utils/renderer';
 import { devConsole } from '../../../utils/dev-console';
 import { Input } from '../../text-input/styles/inputs';
-import { ARIA_LABEL_WARNING } from '../utils';
+import {
+    ARIA_LABEL_WARNING,
+    getAriaDescribedby,
+    getAriaLabel,
+    getAriaLabelledby,
+    getSlotId,
+    getSlotIds,
+    validateAriaLabels,
+} from '../utils';
 import { FormFieldContainer } from './form-field-container';
 
 describe('Form Field Container', () => {
@@ -23,7 +31,7 @@ describe('Form Field Container', () => {
 
         test('matches invalid snapshot', () => {
             const tree = renderWithProviders(
-                <FormFieldContainer {...defaultProps} valid={false}>
+                <FormFieldContainer {...defaultProps} invalid>
                     Children
                 </FormFieldContainer>,
             );
@@ -167,7 +175,7 @@ describe('Form Field Container', () => {
                 consoleSpy.mockRestore();
             });
 
-            test('should contain idAdditionalElement when ariaLabelledBy provided', () => {
+            test('should contain idAdditionalElement when ariaLabelledby provided', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
@@ -231,7 +239,7 @@ describe('Form Field Container', () => {
                     <FormFieldContainer
                         label={label}
                         id={providedId}
-                        valid={false}
+                        invalid
                         validationErrorMessage={invalidMessage}
                     >
                         <Input />
@@ -277,7 +285,7 @@ describe('Form Field Container', () => {
                         label={label}
                         hint={hint}
                         id={providedId}
-                        valid={false}
+                        invalid
                         validationErrorMessage=""
                     >
                         <Input />
@@ -315,4 +323,95 @@ describe('Form Field Container', () => {
             });
         });
     });
+
+    describe('Utils', () => {
+        describe('validateAriaLabels', () => {
+            it('returns true when only one label is provided', () => {
+                expect(validateAriaLabels('label')).toBe(true);
+                expect(validateAriaLabels(undefined, 'ariaLabel')).toBe(true);
+                expect(validateAriaLabels(undefined, undefined, 'ariaLabelledby')).toBe(true);
+            });
+
+            it('returns false when no labels are provided', () => {
+                expect(validateAriaLabels()).toBe(false);
+            });
+
+            it('returns false when more than one label is provided', () => {
+                expect(validateAriaLabels('label', 'ariaLabel')).toBe(false);
+                expect(validateAriaLabels('label', undefined, 'ariaLabelledby')).toBe(false);
+                expect(validateAriaLabels(undefined, 'ariaLabel', 'ariaLabelledby')).toBe(false);
+            });
+        });
+
+        describe('getAriaLabel', () => {
+            it('returns ariaLabel when labels are valid', () => {
+                expect(getAriaLabel(undefined, 'ariaLabel', undefined)).toEqual('ariaLabel');
+            });
+
+            it('returns undefined when labels are not valid', () => {
+                expect(getAriaLabel('label', 'ariaLabel', undefined)).toBeUndefined();
+            });
+        });
+
+        describe('getAriaLabelledby', () => {
+            it('joins label and additionalLabelledby with a space', () => {
+                const output = getAriaLabelledby({ label: 'label' }, 'additionalLabelledby');
+                expect(output).toEqual('label additionalLabelledby');
+            });
+
+            it('returns label when additionalLabelledby is undefined', () => {
+                expect(getAriaLabelledby({ label: 'label' })).toEqual('label');
+            });
+
+            it('returns undefined when label and additionalLabelledby are undefined', () => {
+                expect(getAriaLabelledby({})).toBeUndefined();
+            });
+        });
+
+        describe('getAriaDescribedby', () => {
+            it('joins invalid, hint and additionalDescribedby with a space', () => {
+                const output = getAriaDescribedby({ invalid: 'invalid', hint: 'hint' }, 'additionalDescribedby');
+                expect(output).toEqual('invalid hint additionalDescribedby');
+            });
+
+            it('returns invalid and hint when additionalDescribedby is undefined', () => {
+                const output = getAriaDescribedby({ invalid: 'invalid', hint: 'hint' });
+                expect(output).toEqual('invalid hint');
+            });
+
+            it('returns undefined when invalid, hint and additionalDescribedby are undefined', () => {
+                expect(getAriaDescribedby({})).toBeUndefined();
+            });
+        });
+
+        describe('getSlotId', () => {
+            it('returns a string with formFieldId and propName when prop is provided', () => {
+                expect(getSlotId('prop', 'formFieldId', 'propName')).toEqual('formFieldId_propName');
+            });
+
+            it('returns undefined when prop is not provided', () => {
+                expect(getSlotId(undefined, 'formFieldId', 'propName')).toBeUndefined();
+            });
+        });
+
+        describe('getSlotIds', () => {
+            it('returns an object with label, hint, and invalid ids when all props are provided', () => {
+                const result = getSlotIds('formFieldId', 'label', 'hint', 'invalid');
+                expect(result).toEqual({
+                    label: 'formFieldId_label',
+                    hint: 'formFieldId_hint',
+                    invalid: 'formFieldId_invalid',
+                });
+            });
+
+            it('returns an object with undefined ids when props are not provided', () => {
+                const result = getSlotIds('formFieldId');
+                expect(result).toEqual({
+                    label: undefined,
+                    hint: undefined,
+                    invalid: undefined,
+                });
+            });
+        });
+    });
 });
diff --git a/packages/react/src/components/form/form-container/form-field-container.tsx b/packages/react/src/components/form/form-container/form-field-container.tsx
index 3d4ef8bd18..19e623c0ec 100644
--- a/packages/react/src/components/form/form-container/form-field-container.tsx
+++ b/packages/react/src/components/form/form-container/form-field-container.tsx
@@ -1,32 +1,30 @@
 import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
 import styled from 'styled-components';
 import { useId } from '../../../hooks/use-id';
-import { ResolvedTheme } from '../../../themes/theme';
 import { useDeviceContext } from '../../device-context-provider/device-context-provider';
 import { InvalidField } from '../feedbacks/invalid-field';
 import { Label } from '../../label/label';
 import { TooltipProps } from '../../tooltip/tooltip';
 import { FormFieldContext, FormFieldControlProps } from '../form-field-context';
-import { getAriaDescribedBy, getAriaLabel, getAriaLabelledBy, getSlotIds } from '../utils';
+import { getAriaDescribedby, getAriaLabel, getAriaLabelledby, getSlotIds } from '../utils';
 
 interface StyledDivProps {
-    theme: ResolvedTheme;
-    hasLabel: boolean;
-    hasHint: boolean;
-    valid: boolean;
-    noMargin?: boolean;
+    $hasLabel: boolean;
+    $hasHint: boolean;
+    $invalid: boolean;
+    $noMargin?: boolean;
 }
 
 const StyledDiv = styled.div<StyledDivProps>`
-    margin: ${({ noMargin }) => (noMargin ? '0' : '0 0 var(--spacing-3x)')};
+    margin: ${({ $noMargin }) => ($noMargin ? '0' : '0 0 var(--spacing-3x)')};
 
     input,
     select,
     textarea {
-        border-color: ${({ theme, valid }) => (valid ? theme.component['field-input-border-color'] : theme.component['field-input-error-border-color'])};
+        border-color: ${({ theme, $invalid }) => (!$invalid ? theme.component['field-input-border-color'] : theme.component['field-input-error-border-color'])};
     }
 
-    > :nth-child(${({ hasLabel, hasHint, valid }) => (hasLabel ? 1 : 0) + (hasHint ? 1 : 0) + (!valid ? 1 : 0)}) {
+    > :nth-child(${({ $hasLabel, $hasHint, $invalid }) => ($hasLabel ? 1 : 0) + ($hasHint ? 1 : 0) + ($invalid ? 1 : 0)}) {
         margin-bottom: var(--spacing-half);
     }
 `;
@@ -65,64 +63,64 @@ export const FormFieldContainer: FunctionComponent<PropsWithChildren<FormFieldCo
     noMargin,
     required = false,
     tooltip,
-    valid = true,
+    invalid = false,
     validationErrorMessage,
     ...props
 }) => {
     const { isMobile } = useDeviceContext();
     const formId = useId(providedId);
-    const slotIds = getSlotIds(formId, label, hint, (validationErrorMessage && !valid));
 
+    const slotIds = getSlotIds(formId, label, hint, (validationErrorMessage && invalid));
     const ariaLabel = getAriaLabel(label, providedAriaLabel, providedAriaLabelledby);
-    const ariaLabelledby = getAriaLabelledBy(slotIds, providedAriaLabelledby);
-    const ariaDescribedby = getAriaDescribedBy(slotIds, providedAriaDescribedby);
+    const ariaLabelledby = getAriaLabelledby(slotIds, providedAriaLabelledby);
+    const ariaDescribedby = getAriaDescribedby(slotIds, providedAriaDescribedby);
 
     const contextValues = useMemo(() => ({
         formId,
         ariaLabel,
         ariaLabelledby,
         ariaDescribedby,
-        valid,
+        invalid,
         hint,
         required,
         disabled,
-    }), [formId, ariaLabel, ariaLabelledby, ariaDescribedby, valid, hint, required, disabled]);
+    }), [formId, ariaLabel, ariaLabelledby, ariaDescribedby, invalid, hint, required, disabled]);
 
     return (
         <FormFieldContext.Provider value={contextValues}>
             <StyledDiv
                 className={className}
-                noMargin={noMargin}
-                hasLabel={!!label}
-                hasHint={!!hint}
-                valid={valid}
+                $noMargin={noMargin}
+                $hasLabel={!!label}
+                $hasHint={!!hint}
+                $invalid={invalid}
                 {...props /* eslint-disable-line react/jsx-props-no-spreading */}
             >
                 {label && (
-                <Label
-                    id={slotIds.label}
-                    forId={formId}
-                    tooltip={tooltip}
-                    required={required}
-                >
-                    {label}
-                </Label>
-            )}
+                    <Label
+                        id={slotIds.label}
+                        forId={formId}
+                        tooltip={tooltip}
+                        required={required}
+                    >
+                        {label}
+                    </Label>
+                )}
                 {hint && (
-                <StyledHint
-                    id={slotIds.hint}
-                    isMobile={isMobile}
-                >
-                    {hint}
-                </StyledHint>
-            )}
-                {!valid && (
-                <InvalidField
-                    controlId={slotIds.invalid}
-                    feedbackMsg={validationErrorMessage}
-                    noIcon={noInvalidFieldIcon}
-                />
-            )}
+                    <StyledHint
+                        id={slotIds.hint}
+                        isMobile={isMobile}
+                    >
+                        {hint}
+                    </StyledHint>
+                )}
+                {invalid && (
+                    <InvalidField
+                        controlId={slotIds.invalid}
+                        feedbackMsg={validationErrorMessage}
+                        noIcon={noInvalidFieldIcon}
+                    />
+                )}
                 {children}
             </StyledDiv>
         </FormFieldContext.Provider>
diff --git a/packages/react/src/components/form/form-field-context.ts b/packages/react/src/components/form/form-field-context.ts
index d06906c66e..096e9a00c4 100644
--- a/packages/react/src/components/form/form-field-context.ts
+++ b/packages/react/src/components/form/form-field-context.ts
@@ -7,33 +7,16 @@ export interface FormFieldControlProps {
     ariaDescribedby?: string
     disabled?: boolean;
     required?: boolean;
-    valid?: boolean;
+    invalid?: boolean;
 }
 
 export const FormFieldContext = createContext<FormFieldControlProps>({});
 
-function applyDefault<T>(fields: T, defaults: T, keys: (keyof T)[]): T {
-    const result = <T>{};
-    keys.forEach((key) => {
-        result[key] = fields[key] === undefined ? defaults[key] : fields[key];
-    });
-    return result;
-}
-
-export function useFormFieldContext(props: FormFieldControlProps): FormFieldControlProps {
-    const context = useContext(FormFieldContext);
+export function useFormFieldContext(newContext: FormFieldControlProps): FormFieldControlProps {
+    const prevContext = useContext(FormFieldContext);
 
-    return applyDefault(
-        props,
-        context,
-        [
-            'formId',
-            'ariaLabel',
-            'ariaLabelledby',
-            'ariaDescribedby',
-            'valid',
-            'required',
-            'disabled',
-        ],
-    );
+    return {
+        ...prevContext,
+        ...newContext,
+    };
 }
diff --git a/packages/react/src/components/form/utils.ts b/packages/react/src/components/form/utils.ts
index 3fb12c1559..c1203970ab 100644
--- a/packages/react/src/components/form/utils.ts
+++ b/packages/react/src/components/form/utils.ts
@@ -1,4 +1,6 @@
+import { ReactNode } from 'react';
 import { devConsole } from '../../utils/dev-console';
+import { joinStrings } from '../../utils/string';
 
 interface FormFieldIds {
     label?: string;
@@ -6,24 +8,20 @@ interface FormFieldIds {
     invalid?: string;
 }
 
-function makeSlotId(prop: React.ReactNode, formFieldId: string, propName: string): string | undefined {
-    if (!prop) {
-        return undefined;
-    }
-
-    return `${formFieldId}_${propName}`;
+export function getSlotId(prop: ReactNode, formFieldId: string, propName: string): string | undefined {
+    return prop ? `${formFieldId}_${propName}` : undefined;
 }
 
 export function getSlotIds(
     formFieldId: string,
-    label?: React.ReactNode,
-    hint?: React.ReactNode,
-    invalid?: React.ReactNode,
+    label?: ReactNode,
+    hint?: ReactNode,
+    invalid?: ReactNode,
 ): FormFieldIds {
     return {
-        label: makeSlotId(label, formFieldId, 'label'),
-        hint: makeSlotId(hint, formFieldId, 'hint'),
-        invalid: makeSlotId(invalid, formFieldId, 'invalid'),
+        label: getSlotId(label, formFieldId, 'label'),
+        hint: getSlotId(hint, formFieldId, 'hint'),
+        invalid: getSlotId(invalid, formFieldId, 'invalid'),
     };
 }
 
@@ -43,11 +41,6 @@ export const validateAriaLabels = (
     return true;
 };
 
-export function joinStrings(...strings: Array<string | undefined>): string | undefined {
-    const filteredStrings = strings.filter(Boolean);
-    return filteredStrings.length > 0 ? filteredStrings.join(' ') : undefined;
-}
-
 export function getAriaLabel(
     label?: string,
     ariaLabel?: string,
@@ -56,16 +49,16 @@ export function getAriaLabel(
     return validateAriaLabels(label, ariaLabel, ariaLabelledby) ? ariaLabel : undefined;
 }
 
-export function getAriaLabelledBy(
+export function getAriaLabelledby(
     { label }: FormFieldIds,
-    additionalLabelledBy?: string,
+    additionalLabelledby?: string,
 ): string | undefined {
-    return joinStrings(label, additionalLabelledBy);
+    return joinStrings(label, additionalLabelledby);
 }
 
-export function getAriaDescribedBy(
+export function getAriaDescribedby(
     { invalid, hint }: FormFieldIds,
-    additionalDescribedBy?: string,
+    additionalDescribedby?: string,
 ): string | undefined {
-    return joinStrings(invalid, hint, additionalDescribedBy);
+    return joinStrings(invalid, hint, additionalDescribedby);
 }
diff --git a/packages/react/src/components/text-input/styles/inputs.tsx b/packages/react/src/components/text-input/styles/inputs.tsx
index fa9abd2b8c..601caa7d0c 100644
--- a/packages/react/src/components/text-input/styles/inputs.tsx
+++ b/packages/react/src/components/text-input/styles/inputs.tsx
@@ -121,14 +121,14 @@ type PartialFormFieldProps = Pick<FormFieldControlProps,
     | 'ariaLabel'
     | 'ariaLabelledby'
     | 'ariaDescribedby'
-    | 'valid'
+    | 'invalid'
 >;
 
 export type InputProps = PartialInputProps & PartialFormFieldProps;
 
 export const Input = forwardRef(({
     id: providedId,
-    valid: providedValid = true,
+    invalid: providedInvalid = true,
     required: providedRequired = false,
     disabled: providedDisabled = false,
     ...otherProps
@@ -141,7 +141,7 @@ export const Input = forwardRef(({
         ariaLabel,
         ariaLabelledby,
         ariaDescribedby,
-        valid = providedValid,
+        invalid = providedInvalid,
         required = providedRequired,
         disabled = providedDisabled,
     } = useFormFieldContext(otherProps);
@@ -151,9 +151,9 @@ export const Input = forwardRef(({
             aria-label={ariaLabel}
             aria-labelledby={ariaLabel ? undefined : ariaLabelledby}
             aria-describedby={ariaDescribedby}
-            aria-disabled={disabled ? 'true' : 'false'}
-            aria-required={required ? 'true' : 'false'}
-            aria-invalid={valid ? 'false' : 'true'}
+            aria-disabled={disabled}
+            aria-required={required}
+            aria-invalid={invalid}
             data-testid="input"
             id={formId || inputId}
             disabled={disabled}
diff --git a/packages/react/src/utils/string.test.ts b/packages/react/src/utils/string.test.ts
index 80ee7b0fa6..e0fd63004a 100644
--- a/packages/react/src/utils/string.test.ts
+++ b/packages/react/src/utils/string.test.ts
@@ -1,4 +1,4 @@
-import { allSameLetter, stripDiacritics } from './string';
+import { allSameLetter, joinStrings, stripDiacritics } from './string';
 
 describe('string utilities', () => {
     describe('allSameLetter', () => {
@@ -16,4 +16,18 @@ describe('string utilities', () => {
             expect(stripDiacritics('Où il est le Père Noël, déjà?')).toBe('Ou il est le Pere Noel, deja?');
         });
     });
+
+    describe('joinStrings', () => {
+        it('joins multiple strings with a space', () => {
+            expect(joinStrings('a', 'b', 'c')).toEqual('a b c');
+        });
+
+        it('ignores undefined values', () => {
+            expect(joinStrings('a', undefined, 'c')).toEqual('a c');
+        });
+
+        it('returns undefined when all values are undefined', () => {
+            expect(joinStrings(undefined, undefined, undefined)).toBeUndefined();
+        });
+    });
 });
diff --git a/packages/react/src/utils/string.ts b/packages/react/src/utils/string.ts
index 288ee749b5..438a258c44 100644
--- a/packages/react/src/utils/string.ts
+++ b/packages/react/src/utils/string.ts
@@ -7,3 +7,8 @@ export function allSameLetter(text: string): boolean {
 export function stripDiacritics(input: string): string {
     return input.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
 }
+
+export function joinStrings(...strings: Array<string | undefined>): string | undefined {
+    const filteredStrings = strings.filter(Boolean);
+    return filteredStrings.length > 0 ? filteredStrings.join(' ') : undefined;
+}

From 34c1a19a0b06336dcabbb9304955258a0cf627ea Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 6 Jun 2024 17:00:38 -0400
Subject: [PATCH 05/23] chore(form-field): post review changes test fixes

---
 .../react/src/components/combobox/combobox.tsx   |  4 ++--
 .../src/components/date-picker/date-picker.tsx   |  2 +-
 .../components/dropdown-list/dropdown-list.tsx   |  2 +-
 .../components/numeric-input/numeric-input.tsx   |  2 +-
 .../password-creation-input.tsx                  |  2 +-
 .../components/password-input/password-input.tsx |  2 +-
 .../components/stepper-input/stepper-input.tsx   |  4 ++--
 .../src/components/text-area/text-area.test.tsx  |  2 +-
 .../react/src/components/text-area/text-area.tsx |  2 +-
 .../components/text-input/text-input.test.tsx    | 16 ++++++++--------
 .../src/components/text-input/text-input.tsx     |  2 +-
 11 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/components/combobox/combobox.tsx b/packages/react/src/components/combobox/combobox.tsx
index 3f4a1b8f37..cbd14a3ba7 100644
--- a/packages/react/src/components/combobox/combobox.tsx
+++ b/packages/react/src/components/combobox/combobox.tsx
@@ -76,7 +76,7 @@ const Textbox = styled.input<TextboxProps>`
     width: 100%;
 
     ${focus};
-    
+
     &::placeholder {
         color: ${({ theme }) => theme.component['combobox-placeholder-text-color']};
         font-style: italic;
@@ -597,7 +597,7 @@ export const Combobox: VoidFunctionComponent<ComboboxProps> = ({
             label={label}
             required={required}
             tooltip={tooltip}
-            valid={valid}
+            invalid={!valid}
             validationErrorMessage={validationErrorMessage || t('validationErrorMessage')}
             hint={hint}
         >
diff --git a/packages/react/src/components/date-picker/date-picker.tsx b/packages/react/src/components/date-picker/date-picker.tsx
index 1012c6d14c..6b642c870c 100644
--- a/packages/react/src/components/date-picker/date-picker.tsx
+++ b/packages/react/src/components/date-picker/date-picker.tsx
@@ -517,7 +517,7 @@ export const Datepicker = forwardRef(({
                 required={required}
                 tooltip={tooltip}
                 hint={hint}
-                valid={valid}
+                invalid={!valid}
                 validationErrorMessage={validationErrorMessage || t('validationErrorMessage')}
             >
                 <Container isMobile={isMobile}>
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.tsx b/packages/react/src/components/dropdown-list/dropdown-list.tsx
index cd85104654..bff24a386a 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.tsx
+++ b/packages/react/src/components/dropdown-list/dropdown-list.tsx
@@ -479,7 +479,7 @@ export const DropdownList: VoidFunctionComponent<DropdownListProps<boolean | und
             label={label}
             required={required}
             tooltip={tooltip}
-            valid={valid}
+            invalid={!valid}
             validationErrorMessage={validationErrorMessage || t('validationErrorMessage')}
             hint={hint}
         >
diff --git a/packages/react/src/components/numeric-input/numeric-input.tsx b/packages/react/src/components/numeric-input/numeric-input.tsx
index 25cb472050..5fb36329d6 100644
--- a/packages/react/src/components/numeric-input/numeric-input.tsx
+++ b/packages/react/src/components/numeric-input/numeric-input.tsx
@@ -148,7 +148,7 @@ export const NumericInput: VoidFunctionComponent<NumericInputProps> = ({
             label={label}
             tooltip={tooltip}
             noMargin={noMargin}
-            valid={!numericInput.invalid}
+            invalid={numericInput.invalid}
             noInvalidFieldIcon={!numericInput.validationErrorMessage}
             validationErrorMessage={numericInput.validationErrorMessage ?? ''}
         >
diff --git a/packages/react/src/components/password-creation-input/password-creation-input.tsx b/packages/react/src/components/password-creation-input/password-creation-input.tsx
index 7fc2d9ccd5..53e28ad3af 100644
--- a/packages/react/src/components/password-creation-input/password-creation-input.tsx
+++ b/packages/react/src/components/password-creation-input/password-creation-input.tsx
@@ -78,7 +78,7 @@ export const PasswordCreationInput: VoidFunctionComponent<PasswordCreationInputP
             label={t('create-password')}
             validationErrorMessage=""
             noInvalidFieldIcon
-            valid={isValid || isEmpty}
+            invalid={!isValid && !isEmpty}
         >
             <div id={hintId} aria-live="assertive" aria-hidden="true" aria-atomic="true">
                 <StyledUl>
diff --git a/packages/react/src/components/password-input/password-input.tsx b/packages/react/src/components/password-input/password-input.tsx
index a79e5cceba..d002850df6 100644
--- a/packages/react/src/components/password-input/password-input.tsx
+++ b/packages/react/src/components/password-input/password-input.tsx
@@ -79,7 +79,7 @@ export const PasswordInput: VoidFunctionComponent<PasswordInputProps> = ({
     return (
         <FormFieldContainer
             id={id}
-            valid={isValid}
+            invalid={!isValid}
             label={label}
             hint={hint}
             validationErrorMessage={validationErrorMessage ?? ''}
diff --git a/packages/react/src/components/stepper-input/stepper-input.tsx b/packages/react/src/components/stepper-input/stepper-input.tsx
index 0f102b0738..fc2426385f 100644
--- a/packages/react/src/components/stepper-input/stepper-input.tsx
+++ b/packages/react/src/components/stepper-input/stepper-input.tsx
@@ -28,7 +28,7 @@ interface StyledInputProps {
 }
 
 const StyledInput = styled.input<StyledInputProps>`
-    ${responsiveInputsStyle}
+    ${responsiveInputsStyle};
 
     border-radius: ${({ device }) => (device.isMobile ? 'var(--border-radius)' : 'var(--border-radius) 0 0 var(--border-radius)')};
     height: ${({ device }) => (device.isMobile ? 2.5 : 2)}rem;
@@ -132,7 +132,7 @@ export const StepperInput: VoidFunctionComponent<StepperInputProps> = ({
             label={label}
             tooltip={tooltip}
             noMargin={noMargin}
-            valid={valid}
+            invalid={!valid}
             validationErrorMessage={validationErrorMessage || t('validationErrorMessage')}
         >
             <Wrapper>
diff --git a/packages/react/src/components/text-area/text-area.test.tsx b/packages/react/src/components/text-area/text-area.test.tsx
index 2b123cc0d4..8ac79dc498 100644
--- a/packages/react/src/components/text-area/text-area.test.tsx
+++ b/packages/react/src/components/text-area/text-area.test.tsx
@@ -81,7 +81,7 @@ describe('TextArea', () => {
 
         const container = getByTestId(wrapper, 'container');
         const charCounter = getByTestId(wrapper, 'char-counter');
-        expect(container.prop('valid')).toBe(false);
+        expect(container.prop('invalid')).toBe(true);
         expect(charCounter.prop('valid')).toBe(false);
     });
 
diff --git a/packages/react/src/components/text-area/text-area.tsx b/packages/react/src/components/text-area/text-area.tsx
index d022ae8244..fbe038fd4f 100644
--- a/packages/react/src/components/text-area/text-area.tsx
+++ b/packages/react/src/components/text-area/text-area.tsx
@@ -146,7 +146,7 @@ export const TextArea: VoidFunctionComponent<TextAreaProps> = ({
             required={required}
             tooltip={tooltip}
             hint={hint}
-            valid={validity}
+            invalid={!validity}
             validationErrorMessage={getValidationErrorMessage()}
         >
             <StyledTextArea
diff --git a/packages/react/src/components/text-input/text-input.test.tsx b/packages/react/src/components/text-input/text-input.test.tsx
index fd47712801..438cf2244f 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx
+++ b/packages/react/src/components/text-input/text-input.test.tsx
@@ -48,7 +48,7 @@ describe('TextInput', () => {
         const wrapper = shallow(<TextInput {...initialProps} />);
 
         const container = getByTestId(wrapper, 'field-container');
-        expect(container.prop('valid')).toBe(true);
+        expect(container.prop('invalid')).toBe(false);
     });
 
     test('should set as invalid when invalid event is triggered', () => {
@@ -57,21 +57,21 @@ describe('TextInput', () => {
         getByTestId(wrapper, 'text-input').simulate('invalid');
 
         const container = getByTestId(wrapper, 'field-container');
-        expect(container.prop('valid')).toBe(false);
+        expect(container.prop('invalid')).toBe(true);
     });
 
     test('should set as invalid when valid prop is false', () => {
         const wrapper = shallow(<TextInput valid={false} />);
 
         const container = getByTestId(wrapper, 'field-container');
-        expect(container.prop('valid')).toBe(false);
+        expect(container.prop('invalid')).toBe(true);
     });
 
     test('should set as valid when valid prop is true', () => {
         const wrapper = shallow(<TextInput valid />);
 
         const container = getByTestId(wrapper, 'field-container');
-        expect(container.prop('valid')).toBe(true);
+        expect(container.prop('invalid')).toBe(false);
     });
 
     test('should set as invalid when valid prop is false and input trigger blur with checkValidity is true', () => {
@@ -81,7 +81,7 @@ describe('TextInput', () => {
         textInput.simulate('blur', { currentTarget: { checkValidity: () => true } });
         const container = getByTestId(wrapper, 'field-container');
 
-        expect(container.prop('valid')).toBe(false);
+        expect(container.prop('invalid')).toBe(true);
     });
 
     test('should set as valid when valid prop is true and input trigger blur with checkValidity is true', () => {
@@ -91,7 +91,7 @@ describe('TextInput', () => {
         textInput.simulate('blur', { currentTarget: { checkValidity: () => true } });
         const container = getByTestId(wrapper, 'field-container');
 
-        expect(container.prop('valid')).toBe(true);
+        expect(container.prop('invalid')).toBe(false);
     });
 
     test('should set as valid when valid prop is true and input trigger blur with checkValidity is false', () => {
@@ -101,7 +101,7 @@ describe('TextInput', () => {
         textInput.simulate('blur', { currentTarget: { checkValidity: () => false } });
         const container = getByTestId(wrapper, 'field-container');
 
-        expect(container.prop('valid')).toBe(true);
+        expect(container.prop('invalid')).toBe(false);
     });
 
     test('should set as invalid when valid prop is false and input trigger blur with checkValidity is false', () => {
@@ -111,7 +111,7 @@ describe('TextInput', () => {
         textInput.simulate('blur', { currentTarget: { checkValidity: () => false } });
         const container = getByTestId(wrapper, 'field-container');
 
-        expect(container.prop('valid')).toBe(false);
+        expect(container.prop('invalid')).toBe(true);
     });
 
     test('onChange callback is called when content is changed', () => {
diff --git a/packages/react/src/components/text-input/text-input.tsx b/packages/react/src/components/text-input/text-input.tsx
index d77de8b1dc..07db1cad42 100644
--- a/packages/react/src/components/text-input/text-input.tsx
+++ b/packages/react/src/components/text-input/text-input.tsx
@@ -145,7 +145,7 @@ export const TextInput = forwardRef(({
             label={label}
             required={required}
             tooltip={tooltip}
-            valid={validity}
+            invalid={!validity}
             validationErrorMessage={validationErrorMessage || t('validationErrorMessage')}
             hint={hint}
             data-testid="field-container"

From ae09d48e2630ae3c6b62c02ccbc584e8140c1d42 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 6 Jun 2024 18:26:42 -0400
Subject: [PATCH 06/23] chore(form-field): fix

---
 .../src/components/form/form-container/form-field-container.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/form/form-container/form-field-container.tsx b/packages/react/src/components/form/form-container/form-field-container.tsx
index 19e623c0ec..e2d61d41a4 100644
--- a/packages/react/src/components/form/form-container/form-field-container.tsx
+++ b/packages/react/src/components/form/form-container/form-field-container.tsx
@@ -21,7 +21,7 @@ const StyledDiv = styled.div<StyledDivProps>`
     input,
     select,
     textarea {
-        border-color: ${({ theme, $invalid }) => (!$invalid ? theme.component['field-input-border-color'] : theme.component['field-input-error-border-color'])};
+        border-color: ${({ theme, $invalid }) => ($invalid ? theme.component['field-input-error-border-color'] : theme.component['field-input-border-color'])};
     }
 
     > :nth-child(${({ $hasLabel, $hasHint, $invalid }) => ($hasLabel ? 1 : 0) + ($hasHint ? 1 : 0) + ($invalid ? 1 : 0)}) {

From 550534aed6f7cbb477f260954f944f3517ea9df6 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 1 Aug 2024 12:10:39 -0400
Subject: [PATCH 07/23] chore(field-container): apply suggested changes

---
 .../src/components/combobox/combobox.tsx      |  6 +-
 .../components/date-picker/date-picker.tsx    |  8 +-
 .../dropdown-list/dropdown-list.tsx           |  6 +-
 .../react/src/components/field/context.ts     | 22 +++++
 .../feedbacks/invalid-field-message.test.tsx} |  4 +-
 .../invalid-field-message.test.tsx.snap}      |  0
 .../feedbacks/invalid-field-message.tsx}      |  6 +-
 .../field-container.test.tsx}                 | 80 +++++++++----------
 .../field-container.test.tsx.snap}            |  6 +-
 .../field-container.tsx}                      | 61 +++++++-------
 .../src/components/{form => field}/utils.ts   |  8 +-
 .../src/components/form/form-field-context.ts | 22 -----
 .../numeric-input/numeric-input.tsx           |  8 +-
 .../password-creation-input.tsx               |  8 +-
 .../password-input/password-input.tsx         |  8 +-
 .../stepper-input/stepper-input.tsx           |  8 +-
 .../components/text-area/text-area.test.tsx   |  2 +-
 .../src/components/text-area/text-area.tsx    |  8 +-
 .../components/text-input/styles/inputs.tsx   | 47 ++++-------
 .../components/text-input/text-input.test.tsx | 16 ++--
 .../src/components/text-input/text-input.tsx  |  8 +-
 21 files changed, 161 insertions(+), 181 deletions(-)
 create mode 100644 packages/react/src/components/field/context.ts
 rename packages/react/src/components/{form/feedbacks/invalid-field.test.tsx => field/feedbacks/invalid-field-message.test.tsx} (52%)
 rename packages/react/src/components/{form/feedbacks/invalid-field.test.tsx.snap => field/feedbacks/invalid-field-message.test.tsx.snap} (100%)
 rename packages/react/src/components/{form/feedbacks/invalid-field.tsx => field/feedbacks/invalid-field-message.tsx} (86%)
 rename packages/react/src/components/{form/form-container/form-field-container.test.tsx => field/field-container.test.tsx} (88%)
 rename packages/react/src/components/{form/form-container/form-field-container.test.tsx.snap => field/field-container.test.tsx.snap} (87%)
 rename packages/react/src/components/{form/form-container/form-field-container.tsx => field/field-container.tsx} (61%)
 rename packages/react/src/components/{form => field}/utils.ts (94%)
 delete mode 100644 packages/react/src/components/form/form-field-context.ts

diff --git a/packages/react/src/components/combobox/combobox.tsx b/packages/react/src/components/combobox/combobox.tsx
index cbd14a3ba7..aa5b5a1f61 100644
--- a/packages/react/src/components/combobox/combobox.tsx
+++ b/packages/react/src/components/combobox/combobox.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FormFieldContainer } from '../form/form-container/form-field-container';
+import { FieldContainer } from '../field/field-container';
 import { IconButton } from '../buttons/icon-button';
 import { Listbox, ListboxOption } from '../listbox/listbox';
 import { TooltipProps } from '../tooltip/tooltip';
@@ -46,7 +46,7 @@ function getBorderColor({ disabled, theme, $valid }: TextboxProps): string {
     return theme.component['combobox-border-color'];
 }
 
-const StyledFieldContainer = styled(FormFieldContainer)`
+const StyledFieldContainer = styled(FieldContainer)`
     position: relative;
 `;
 
@@ -597,7 +597,7 @@ export const Combobox: VoidFunctionComponent<ComboboxProps> = ({
             label={label}
             required={required}
             tooltip={tooltip}
-            invalid={!valid}
+            valid={valid}
             validationErrorMessage={validationErrorMessage || t('validationErrorMessage')}
             hint={hint}
         >
diff --git a/packages/react/src/components/date-picker/date-picker.tsx b/packages/react/src/components/date-picker/date-picker.tsx
index 6b642c870c..1371aa52ce 100644
--- a/packages/react/src/components/date-picker/date-picker.tsx
+++ b/packages/react/src/components/date-picker/date-picker.tsx
@@ -26,7 +26,7 @@ import { v4 as uuid } from '../../utils/uuid';
 import { AbstractButton } from '../buttons/abstract-button';
 import { Button } from '../buttons/button';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FormFieldContainer } from '../form/form-container/form-field-container';
+import { FieldContainer } from '../field/field-container';
 import { Icon } from '../icon/icon';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
@@ -509,7 +509,7 @@ export const Datepicker = forwardRef(({
     return (
         <>
             <ReactDatePickerStyles />
-            <FormFieldContainer
+            <FieldContainer
                 className={className}
                 noMargin={noMargin}
                 id={fieldId}
@@ -517,7 +517,7 @@ export const Datepicker = forwardRef(({
                 required={required}
                 tooltip={tooltip}
                 hint={hint}
-                invalid={!valid}
+                valid={valid}
                 validationErrorMessage={validationErrorMessage || t('validationErrorMessage')}
             >
                 <Container isMobile={isMobile}>
@@ -584,7 +584,7 @@ export const Datepicker = forwardRef(({
                         <Icon name="calendar" size={isMobile ? '24' : '16'} />
                     </CalendarButton>
                 </Container>
-            </FormFieldContainer>
+            </FieldContainer>
         </>
     );
 });
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.tsx b/packages/react/src/components/dropdown-list/dropdown-list.tsx
index bff24a386a..ad9a405fe7 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.tsx
+++ b/packages/react/src/components/dropdown-list/dropdown-list.tsx
@@ -14,7 +14,7 @@ import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { isLetterOrNumber } from '../../utils/regex';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FormFieldContainer } from '../form/form-container/form-field-container';
+import { FieldContainer } from '../field/field-container';
 import { Icon, IconName } from '../icon/icon';
 import { Listbox, ListboxOption } from '../listbox/listbox';
 import { TooltipProps } from '../tooltip/tooltip';
@@ -52,7 +52,7 @@ function getBorderColor({ $disabled, theme, $valid }: TextboxProps): string {
     return theme.component['dropdown-list-input-border-color'];
 }
 
-const StyledFieldContainer = styled(FormFieldContainer)`
+const StyledFieldContainer = styled(FieldContainer)`
     position: relative;
 `;
 
@@ -479,7 +479,7 @@ export const DropdownList: VoidFunctionComponent<DropdownListProps<boolean | und
             label={label}
             required={required}
             tooltip={tooltip}
-            invalid={!valid}
+            valid={valid}
             validationErrorMessage={validationErrorMessage || t('validationErrorMessage')}
             hint={hint}
         >
diff --git a/packages/react/src/components/field/context.ts b/packages/react/src/components/field/context.ts
new file mode 100644
index 0000000000..9cf68b17ea
--- /dev/null
+++ b/packages/react/src/components/field/context.ts
@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+
+export interface FieldControlProps {
+    id?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string
+    disabled?: boolean;
+    required?: boolean;
+    valid?: boolean;
+}
+
+export const FieldControlContext = createContext<FieldControlProps>({});
+
+export function useFieldControlContext(newContext: FieldControlProps): FieldControlProps {
+    const prevContext = useContext(FieldControlContext);
+
+    return {
+        ...prevContext,
+        ...newContext,
+    };
+}
diff --git a/packages/react/src/components/form/feedbacks/invalid-field.test.tsx b/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx
similarity index 52%
rename from packages/react/src/components/form/feedbacks/invalid-field.test.tsx
rename to packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx
index 8a625efd6f..50226f7c54 100644
--- a/packages/react/src/components/form/feedbacks/invalid-field.test.tsx
+++ b/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx
@@ -1,9 +1,9 @@
 import { renderWithTheme } from '../../../test-utils/renderer';
-import { InvalidField } from './invalid-field';
+import { InvalidFieldMessage } from './invalid-field-message';
 
 describe('Invalid field', () => {
     test('Matches the snapshot', () => {
-        const tree = renderWithTheme(<InvalidField controlId="test-id" feedbackMsg="Feedback Message" />);
+        const tree = renderWithTheme(<InvalidFieldMessage controlId="test-id" feedbackMsg="Feedback Message" />);
 
         expect(tree).toMatchSnapshot();
     });
diff --git a/packages/react/src/components/form/feedbacks/invalid-field.test.tsx.snap b/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap
similarity index 100%
rename from packages/react/src/components/form/feedbacks/invalid-field.test.tsx.snap
rename to packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap
diff --git a/packages/react/src/components/form/feedbacks/invalid-field.tsx b/packages/react/src/components/field/feedbacks/invalid-field-message.tsx
similarity index 86%
rename from packages/react/src/components/form/feedbacks/invalid-field.tsx
rename to packages/react/src/components/field/feedbacks/invalid-field-message.tsx
index 5e27259277..a0abc07df3 100644
--- a/packages/react/src/components/form/feedbacks/invalid-field.tsx
+++ b/packages/react/src/components/field/feedbacks/invalid-field-message.tsx
@@ -18,13 +18,13 @@ const StyledIcon = styled(Icon)`
     margin-right: var(--spacing-base);
 `;
 
-interface InvalidFieldProps {
+interface InvalidFieldMessageProps {
     controlId?: string;
     feedbackMsg: string;
     noIcon?: boolean;
 }
 
-const InvalidField: VoidFunctionComponent<InvalidFieldProps> = ({ controlId, feedbackMsg, noIcon }) => {
+const InvalidFieldMessage: VoidFunctionComponent<InvalidFieldMessageProps> = ({ controlId, feedbackMsg, noIcon }) => {
     const { isMobile } = useDeviceContext();
 
     return (
@@ -43,4 +43,4 @@ const InvalidField: VoidFunctionComponent<InvalidFieldProps> = ({ controlId, fee
     );
 };
 
-export { InvalidField };
+export { InvalidFieldMessage };
diff --git a/packages/react/src/components/form/form-container/form-field-container.test.tsx b/packages/react/src/components/field/field-container.test.tsx
similarity index 88%
rename from packages/react/src/components/form/form-container/form-field-container.test.tsx
rename to packages/react/src/components/field/field-container.test.tsx
index abf9730a03..557caa829d 100644
--- a/packages/react/src/components/form/form-container/form-field-container.test.tsx
+++ b/packages/react/src/components/field/field-container.test.tsx
@@ -1,6 +1,6 @@
-import { renderWithProviders } from '../../../test-utils/renderer';
-import { devConsole } from '../../../utils/dev-console';
-import { Input } from '../../text-input/styles/inputs';
+import { renderWithProviders } from '../../test-utils/renderer';
+import { devConsole } from '../../utils/dev-console';
+import { Input } from '../text-input/styles/inputs';
 import {
     ARIA_LABEL_WARNING,
     getAriaDescribedby,
@@ -9,10 +9,10 @@ import {
     getSlotId,
     getSlotIds,
     validateAriaLabels,
-} from '../utils';
-import { FormFieldContainer } from './form-field-container';
+} from './utils';
+import { FieldContainer } from './field-container';
 
-describe('Form Field Container', () => {
+describe('Field Container', () => {
     describe('Styling', () => {
         const defaultProps = {
             id: 'id',
@@ -21,9 +21,9 @@ describe('Form Field Container', () => {
 
         test('matches default snapshot', () => {
             const tree = renderWithProviders(
-                <FormFieldContainer {...defaultProps}>
+                <FieldContainer {...defaultProps}>
                     Children
-                </FormFieldContainer>,
+                </FieldContainer>,
             );
 
             expect(tree).toMatchSnapshot();
@@ -31,9 +31,9 @@ describe('Form Field Container', () => {
 
         test('matches invalid snapshot', () => {
             const tree = renderWithProviders(
-                <FormFieldContainer {...defaultProps} invalid>
+                <FieldContainer {...defaultProps} valid={false}>
                     Children
-                </FormFieldContainer>,
+                </FieldContainer>,
             );
 
             expect(tree).toMatchSnapshot();
@@ -41,9 +41,9 @@ describe('Form Field Container', () => {
 
         test('match noMargin snapshot', () => {
             const tree = renderWithProviders(
-                <FormFieldContainer noMargin {...defaultProps}>
+                <FieldContainer noMargin {...defaultProps}>
                     Children
-                </FormFieldContainer>,
+                </FieldContainer>,
             );
 
             expect(tree).toMatchSnapshot();
@@ -62,9 +62,9 @@ describe('Form Field Container', () => {
             const consoleSpy = jest.spyOn(devConsole, 'warn');
             consoleSpy.mockImplementation(() => {});
             const wrapper = renderWithProviders(
-                <FormFieldContainer id={providedId} validationErrorMessage={invalidMessage}>
+                <FieldContainer id={providedId} validationErrorMessage={invalidMessage}>
                     <Input />
-                </FormFieldContainer>,
+                </FieldContainer>,
             );
 
             const inputWrapper = wrapper.find('input');
@@ -80,7 +80,7 @@ describe('Form Field Container', () => {
             const consoleSpy = jest.spyOn(devConsole, 'warn');
             consoleSpy.mockImplementation(() => {});
             const wrapper = renderWithProviders(
-                <FormFieldContainer
+                <FieldContainer
                     ariaLabel={ariaLabel}
                     ariaLabelledby={additionalElementId}
                     ariaDescribedby={additionalElementId}
@@ -90,7 +90,7 @@ describe('Form Field Container', () => {
                     validationErrorMessage={invalidMessage}
                 >
                     <Input />
-                </FormFieldContainer>,
+                </FieldContainer>,
             );
 
             const inputWrapper = wrapper.find('input');
@@ -106,7 +106,7 @@ describe('Form Field Container', () => {
             const consoleSpy = jest.spyOn(devConsole, 'warn');
             consoleSpy.mockImplementation(() => {});
             const wrapper = renderWithProviders(
-                <FormFieldContainer
+                <FieldContainer
                     ariaLabel={`${ariaLabel}_Parent`}
                     ariaLabelledby={`${additionalElementId}_Parent`}
                     ariaDescribedby={`${additionalElementId}_Parent`}
@@ -120,7 +120,7 @@ describe('Form Field Container', () => {
                         ariaLabelledby={`${additionalElementId}_Child`}
                         ariaDescribedby={`${additionalElementId}_Child`}
                     />
-                </FormFieldContainer>,
+                </FieldContainer>,
             );
 
             const inputWrapper = wrapper.find('input');
@@ -137,14 +137,14 @@ describe('Form Field Container', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
-                    <FormFieldContainer
+                    <FieldContainer
                         ariaLabel={ariaLabel}
                         label={label}
                         id={providedId}
                         validationErrorMessage={invalidMessage}
                     >
                         <Input />
-                    </FormFieldContainer>,
+                    </FieldContainer>,
                 );
 
                 const inputWrapper = wrapper.find('input');
@@ -162,9 +162,9 @@ describe('Form Field Container', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
-                    <FormFieldContainer label={label} id={providedId} validationErrorMessage={invalidMessage}>
+                    <FieldContainer label={label} id={providedId} validationErrorMessage={invalidMessage}>
                         <Input />
-                    </FormFieldContainer>,
+                    </FieldContainer>,
                 );
 
                 const inputWrapper = wrapper.find('input');
@@ -179,13 +179,13 @@ describe('Form Field Container', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
-                    <FormFieldContainer
+                    <FieldContainer
                         id={providedId}
                         validationErrorMessage=""
                         ariaLabelledby={additionalElementId}
                     >
                         <Input />
-                    </FormFieldContainer>,
+                    </FieldContainer>,
                 );
 
                 const inputWrapper = wrapper.find('input');
@@ -202,9 +202,9 @@ describe('Form Field Container', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
-                    <FormFieldContainer label={label} hint={hint} id={providedId} validationErrorMessage="">
+                    <FieldContainer label={label} hint={hint} id={providedId} validationErrorMessage="">
                         <Input />
-                    </FormFieldContainer>,
+                    </FieldContainer>,
                 );
 
                 const inputWrapper = wrapper.find('input');
@@ -219,9 +219,9 @@ describe('Form Field Container', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
-                    <FormFieldContainer label={label} id={providedId} validationErrorMessage={invalidMessage}>
+                    <FieldContainer label={label} id={providedId} validationErrorMessage={invalidMessage}>
                         <Input />
-                    </FormFieldContainer>,
+                    </FieldContainer>,
                 );
 
                 const inputWrapper = wrapper.find('input');
@@ -236,14 +236,14 @@ describe('Form Field Container', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
-                    <FormFieldContainer
+                    <FieldContainer
                         label={label}
                         id={providedId}
-                        invalid
+                        valid={false}
                         validationErrorMessage={invalidMessage}
                     >
                         <Input />
-                    </FormFieldContainer>,
+                    </FieldContainer>,
                 );
 
                 const inputWrapper = wrapper.find('input');
@@ -258,7 +258,7 @@ describe('Form Field Container', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
-                    <FormFieldContainer
+                    <FieldContainer
                         label={label}
                         id={providedId}
                         hint={hint}
@@ -266,7 +266,7 @@ describe('Form Field Container', () => {
                         ariaDescribedby={additionalElementId}
                     >
                         <Input />
-                    </FormFieldContainer>,
+                    </FieldContainer>,
                 );
 
                 const inputWrapper = wrapper.find('input');
@@ -281,15 +281,15 @@ describe('Form Field Container', () => {
         describe('aria-invalid', () => {
             test('should be true when Formfield is invalid', () => {
                 const wrapper = renderWithProviders(
-                    <FormFieldContainer
+                    <FieldContainer
                         label={label}
                         hint={hint}
                         id={providedId}
-                        invalid
+                        valid
                         validationErrorMessage=""
                     >
                         <Input />
-                    </FormFieldContainer>,
+                    </FieldContainer>,
                 );
 
                 const inputWrapper = wrapper.find('input');
@@ -300,9 +300,9 @@ describe('Form Field Container', () => {
         describe('aria-required', () => {
             test('should be true when Formfield is required', () => {
                 const wrapper = renderWithProviders(
-                    <FormFieldContainer label={label} hint={hint} id={providedId} required validationErrorMessage="">
+                    <FieldContainer label={label} hint={hint} id={providedId} required validationErrorMessage="">
                         <Input />
-                    </FormFieldContainer>,
+                    </FieldContainer>,
                 );
 
                 const inputWrapper = wrapper.find('input');
@@ -313,9 +313,9 @@ describe('Form Field Container', () => {
         describe('aria-disabled', () => {
             test('should be true when FormContainer is disabled', () => {
                 const wrapper = renderWithProviders(
-                    <FormFieldContainer label={label} hint={hint} id={providedId} disabled validationErrorMessage="">
+                    <FieldContainer label={label} hint={hint} id={providedId} disabled validationErrorMessage="">
                         <Input />
-                    </FormFieldContainer>,
+                    </FieldContainer>,
                 );
 
                 const inputWrapper = wrapper.find('input');
diff --git a/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap b/packages/react/src/components/field/field-container.test.tsx.snap
similarity index 87%
rename from packages/react/src/components/form/form-container/form-field-container.test.tsx.snap
rename to packages/react/src/components/field/field-container.test.tsx.snap
index c91fb3b3da..b4dd3624d1 100644
--- a/packages/react/src/components/form/form-container/form-field-container.test.tsx.snap
+++ b/packages/react/src/components/field/field-container.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Form Field Container Styling match noMargin snapshot 1`] = `
+exports[`Field Container Styling match noMargin snapshot 1`] = `
 .c0 {
   margin: 0;
 }
@@ -22,7 +22,7 @@ exports[`Form Field Container Styling match noMargin snapshot 1`] = `
 </div>
 `;
 
-exports[`Form Field Container Styling matches default snapshot 1`] = `
+exports[`Field Container Styling matches default snapshot 1`] = `
 .c0 {
   margin: 0 0 var(--spacing-3x);
 }
@@ -44,7 +44,7 @@ exports[`Form Field Container Styling matches default snapshot 1`] = `
 </div>
 `;
 
-exports[`Form Field Container Styling matches invalid snapshot 1`] = `
+exports[`Field Container Styling matches invalid snapshot 1`] = `
 .c1 {
   color: #CD2C23;
   display: -webkit-box;
diff --git a/packages/react/src/components/form/form-container/form-field-container.tsx b/packages/react/src/components/field/field-container.tsx
similarity index 61%
rename from packages/react/src/components/form/form-container/form-field-container.tsx
rename to packages/react/src/components/field/field-container.tsx
index e2d61d41a4..7ae74fd421 100644
--- a/packages/react/src/components/form/form-container/form-field-container.tsx
+++ b/packages/react/src/components/field/field-container.tsx
@@ -1,17 +1,17 @@
 import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
 import styled from 'styled-components';
-import { useId } from '../../../hooks/use-id';
-import { useDeviceContext } from '../../device-context-provider/device-context-provider';
-import { InvalidField } from '../feedbacks/invalid-field';
-import { Label } from '../../label/label';
-import { TooltipProps } from '../../tooltip/tooltip';
-import { FormFieldContext, FormFieldControlProps } from '../form-field-context';
-import { getAriaDescribedby, getAriaLabel, getAriaLabelledby, getSlotIds } from '../utils';
+import { useId } from '../../hooks/use-id';
+import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { FieldControlContext, FieldControlProps } from './context';
+import { InvalidFieldMessage } from './feedbacks/invalid-field-message';
+import { Label } from '../label/label';
+import { TooltipProps } from '../tooltip/tooltip';
+import { getAriaDescribedby, getAriaLabel, getAriaLabelledby, getSlotIds } from './utils';
 
 interface StyledDivProps {
     $hasLabel: boolean;
     $hasHint: boolean;
-    $invalid: boolean;
+    $valid: boolean;
     $noMargin?: boolean;
 }
 
@@ -21,35 +21,34 @@ const StyledDiv = styled.div<StyledDivProps>`
     input,
     select,
     textarea {
-        border-color: ${({ theme, $invalid }) => ($invalid ? theme.component['field-input-error-border-color'] : theme.component['field-input-border-color'])};
+        border-color: ${({ theme, $valid }) => ($valid ? theme.component['field-input-border-color'] : theme.component['field-input-error-border-color'])};
     }
 
-    > :nth-child(${({ $hasLabel, $hasHint, $invalid }) => ($hasLabel ? 1 : 0) + ($hasHint ? 1 : 0) + ($invalid ? 1 : 0)}) {
+    > :nth-child(${({ $hasLabel, $hasHint, $valid }) => ($hasLabel ? 1 : 0) + ($hasHint ? 1 : 0) + (!$valid ? 1 : 0)}) {
         margin-bottom: var(--spacing-half);
     }
 `;
 
-const StyledHint = styled.span<{ isMobile: boolean }>`
+const StyledHint = styled.span<{ $isMobile: boolean }>`
     color: ${(props) => props.theme.component['field-hint-text-color']};
     display: block;
-    font-size: ${({ isMobile }) => (isMobile ? '0.875rem' : '0.75rem')};
+    font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
     font-weight: var(--font-normal);
     letter-spacing: 0.02rem;
-    line-height: ${({ isMobile }) => (isMobile ? '1.5rem' : '1.25rem')};
+    line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
 `;
 
-export interface FormFieldContainerProps extends FormFieldControlProps {
+export interface FieldContainerProps extends FieldControlProps {
     className?: string;
-    id?: string;
-    noInvalidFieldIcon?: boolean;
     noMargin?: boolean;
     tooltip?: TooltipProps;
     label?: string;
     hint?: string;
+    noInvalidFieldIcon?: boolean;
     validationErrorMessage: string;
 }
 
-export const FormFieldContainer: FunctionComponent<PropsWithChildren<FormFieldContainerProps>> = ({
+export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerProps>> = ({
     id: providedId,
     ariaLabel: providedAriaLabel,
     ariaLabelledby: providedAriaLabelledby,
@@ -59,47 +58,47 @@ export const FormFieldContainer: FunctionComponent<PropsWithChildren<FormFieldCo
     disabled = false,
     hint,
     label,
-    noInvalidFieldIcon,
+    noInvalidFieldIcon = false,
     noMargin,
     required = false,
     tooltip,
-    invalid = false,
+    valid = true,
     validationErrorMessage,
     ...props
 }) => {
     const { isMobile } = useDeviceContext();
-    const formId = useId(providedId);
+    const fieldId = useId(providedId);
 
-    const slotIds = getSlotIds(formId, label, hint, (validationErrorMessage && invalid));
+    const slotIds = getSlotIds(fieldId, label, hint, (validationErrorMessage && !valid));
     const ariaLabel = getAriaLabel(label, providedAriaLabel, providedAriaLabelledby);
     const ariaLabelledby = getAriaLabelledby(slotIds, providedAriaLabelledby);
     const ariaDescribedby = getAriaDescribedby(slotIds, providedAriaDescribedby);
 
     const contextValues = useMemo(() => ({
-        formId,
+        id: fieldId,
         ariaLabel,
         ariaLabelledby,
         ariaDescribedby,
-        invalid,
+        valid,
         hint,
         required,
         disabled,
-    }), [formId, ariaLabel, ariaLabelledby, ariaDescribedby, invalid, hint, required, disabled]);
+    }), [fieldId, ariaLabel, ariaLabelledby, ariaDescribedby, valid, hint, required, disabled]);
 
     return (
-        <FormFieldContext.Provider value={contextValues}>
+        <FieldControlContext.Provider value={contextValues}>
             <StyledDiv
                 className={className}
                 $noMargin={noMargin}
                 $hasLabel={!!label}
                 $hasHint={!!hint}
-                $invalid={invalid}
+                $valid={valid}
                 {...props /* eslint-disable-line react/jsx-props-no-spreading */}
             >
                 {label && (
                     <Label
                         id={slotIds.label}
-                        forId={formId}
+                        forId={fieldId}
                         tooltip={tooltip}
                         required={required}
                     >
@@ -109,13 +108,13 @@ export const FormFieldContainer: FunctionComponent<PropsWithChildren<FormFieldCo
                 {hint && (
                     <StyledHint
                         id={slotIds.hint}
-                        isMobile={isMobile}
+                        $isMobile={isMobile}
                     >
                         {hint}
                     </StyledHint>
                 )}
-                {invalid && (
-                    <InvalidField
+                {!valid && (
+                    <InvalidFieldMessage
                         controlId={slotIds.invalid}
                         feedbackMsg={validationErrorMessage}
                         noIcon={noInvalidFieldIcon}
@@ -123,6 +122,6 @@ export const FormFieldContainer: FunctionComponent<PropsWithChildren<FormFieldCo
                 )}
                 {children}
             </StyledDiv>
-        </FormFieldContext.Provider>
+        </FieldControlContext.Provider>
     );
 };
diff --git a/packages/react/src/components/form/utils.ts b/packages/react/src/components/field/utils.ts
similarity index 94%
rename from packages/react/src/components/form/utils.ts
rename to packages/react/src/components/field/utils.ts
index c1203970ab..0bdb4cf769 100644
--- a/packages/react/src/components/form/utils.ts
+++ b/packages/react/src/components/field/utils.ts
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { devConsole } from '../../utils/dev-console';
 import { joinStrings } from '../../utils/string';
 
-interface FormFieldIds {
+interface FieldIds {
     label?: string;
     hint?: string;
     invalid?: string;
@@ -17,7 +17,7 @@ export function getSlotIds(
     label?: ReactNode,
     hint?: ReactNode,
     invalid?: ReactNode,
-): FormFieldIds {
+): FieldIds {
     return {
         label: getSlotId(label, formFieldId, 'label'),
         hint: getSlotId(hint, formFieldId, 'hint'),
@@ -50,14 +50,14 @@ export function getAriaLabel(
 }
 
 export function getAriaLabelledby(
-    { label }: FormFieldIds,
+    { label }: FieldIds,
     additionalLabelledby?: string,
 ): string | undefined {
     return joinStrings(label, additionalLabelledby);
 }
 
 export function getAriaDescribedby(
-    { invalid, hint }: FormFieldIds,
+    { invalid, hint }: FieldIds,
     additionalDescribedby?: string,
 ): string | undefined {
     return joinStrings(invalid, hint, additionalDescribedby);
diff --git a/packages/react/src/components/form/form-field-context.ts b/packages/react/src/components/form/form-field-context.ts
deleted file mode 100644
index 096e9a00c4..0000000000
--- a/packages/react/src/components/form/form-field-context.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export interface FormFieldControlProps {
-    formId?: string;
-    ariaLabel?: string;
-    ariaLabelledby?: string;
-    ariaDescribedby?: string
-    disabled?: boolean;
-    required?: boolean;
-    invalid?: boolean;
-}
-
-export const FormFieldContext = createContext<FormFieldControlProps>({});
-
-export function useFormFieldContext(newContext: FormFieldControlProps): FormFieldControlProps {
-    const prevContext = useContext(FormFieldContext);
-
-    return {
-        ...prevContext,
-        ...newContext,
-    };
-}
diff --git a/packages/react/src/components/numeric-input/numeric-input.tsx b/packages/react/src/components/numeric-input/numeric-input.tsx
index 5fb36329d6..ec2cd83eb2 100644
--- a/packages/react/src/components/numeric-input/numeric-input.tsx
+++ b/packages/react/src/components/numeric-input/numeric-input.tsx
@@ -10,7 +10,7 @@ import { useId } from '../../hooks/use-id';
 import { focus } from '../../utils/css-state';
 import { ResolvedTheme } from '../../themes/theme';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FormFieldContainer } from '../form/form-container/form-field-container';
+import { FieldContainer } from '../field/field-container';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
 import { useNumericInput, UseNumericInputParams } from './use-numeric-input';
@@ -141,14 +141,14 @@ export const NumericInput: VoidFunctionComponent<NumericInputProps> = ({
     ), [adornment, adornmentPosition]);
 
     return (
-        <FormFieldContainer
+        <FieldContainer
             className={className}
             id={fieldId}
             hint={hint}
             label={label}
             tooltip={tooltip}
             noMargin={noMargin}
-            invalid={numericInput.invalid}
+            valid={!numericInput.invalid}
             noInvalidFieldIcon={!numericInput.validationErrorMessage}
             validationErrorMessage={numericInput.validationErrorMessage ?? ''}
         >
@@ -172,6 +172,6 @@ export const NumericInput: VoidFunctionComponent<NumericInputProps> = ({
                 />
                 {(adornment && adornmentPosition === 'end') && adornmentContent}
             </Wrapper>
-        </FormFieldContainer>
+        </FieldContainer>
     );
 };
diff --git a/packages/react/src/components/password-creation-input/password-creation-input.tsx b/packages/react/src/components/password-creation-input/password-creation-input.tsx
index 53e28ad3af..2dfd4ed3a1 100644
--- a/packages/react/src/components/password-creation-input/password-creation-input.tsx
+++ b/packages/react/src/components/password-creation-input/password-creation-input.tsx
@@ -2,7 +2,7 @@ import { ChangeEvent, useState, VoidFunctionComponent, useMemo } from 'react';
 import styled from 'styled-components';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { IconButton } from '../buttons/icon-button';
-import { FormFieldContainer } from '../form/form-container/form-field-container';
+import { FieldContainer } from '../field/field-container';
 import { Input } from '../text-input/text-input';
 import { useTranslation } from '../../i18n/use-translation';
 import { Tooltip } from '../tooltip/tooltip';
@@ -73,12 +73,12 @@ export const PasswordCreationInput: VoidFunctionComponent<PasswordCreationInputP
     };
 
     return (
-        <FormFieldContainer
+        <FieldContainer
             id={id}
             label={t('create-password')}
             validationErrorMessage=""
             noInvalidFieldIcon
-            invalid={!isValid && !isEmpty}
+            valid={isValid || isEmpty}
         >
             <div id={hintId} aria-live="assertive" aria-hidden="true" aria-atomic="true">
                 <StyledUl>
@@ -123,6 +123,6 @@ export const PasswordCreationInput: VoidFunctionComponent<PasswordCreationInputP
                 </ShowPasswordButton>
             </PasswordInputContainer>
             <PasswordStrengthContainer strength={strength} id={passwordStrengthId} />
-        </FormFieldContainer>
+        </FieldContainer>
     );
 };
diff --git a/packages/react/src/components/password-input/password-input.tsx b/packages/react/src/components/password-input/password-input.tsx
index d002850df6..272da241a0 100644
--- a/packages/react/src/components/password-input/password-input.tsx
+++ b/packages/react/src/components/password-input/password-input.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { v4 as uuid } from '../../utils/uuid';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FormFieldContainer } from '../form/form-container/form-field-container';
+import { FieldContainer } from '../field/field-container';
 import { Input } from '../text-input/text-input';
 import { Tooltip } from '../tooltip/tooltip';
 
@@ -77,9 +77,9 @@ export const PasswordInput: VoidFunctionComponent<PasswordInputProps> = ({
     }, [onChange]);
 
     return (
-        <FormFieldContainer
+        <FieldContainer
             id={id}
-            invalid={!isValid}
+            valid={isValid}
             label={label}
             hint={hint}
             validationErrorMessage={validationErrorMessage ?? ''}
@@ -120,6 +120,6 @@ export const PasswordInput: VoidFunctionComponent<PasswordInputProps> = ({
                     </Tooltip>
                 </ShowPasswordButton>
             </PasswordInputContainer>
-        </FormFieldContainer>
+        </FieldContainer>
     );
 };
diff --git a/packages/react/src/components/stepper-input/stepper-input.tsx b/packages/react/src/components/stepper-input/stepper-input.tsx
index fc2426385f..ba42e72f70 100644
--- a/packages/react/src/components/stepper-input/stepper-input.tsx
+++ b/packages/react/src/components/stepper-input/stepper-input.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { v4 as uuid } from '../../utils/uuid';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FormFieldContainer } from '../form/form-container/form-field-container';
+import { FieldContainer } from '../field/field-container';
 import { responsiveInputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
 import { StepperButtons } from './stepper-buttons';
@@ -126,13 +126,13 @@ export const StepperInput: VoidFunctionComponent<StepperInputProps> = ({
     };
 
     return (
-        <FormFieldContainer
+        <FieldContainer
             id={fieldId}
             hint={hint}
             label={label}
             tooltip={tooltip}
             noMargin={noMargin}
-            invalid={!valid}
+            valid={valid}
             validationErrorMessage={validationErrorMessage || t('validationErrorMessage')}
         >
             <Wrapper>
@@ -161,6 +161,6 @@ export const StepperInput: VoidFunctionComponent<StepperInputProps> = ({
                     />
                 )}
             </Wrapper>
-        </FormFieldContainer>
+        </FieldContainer>
     );
 };
diff --git a/packages/react/src/components/text-area/text-area.test.tsx b/packages/react/src/components/text-area/text-area.test.tsx
index 8ac79dc498..2b123cc0d4 100644
--- a/packages/react/src/components/text-area/text-area.test.tsx
+++ b/packages/react/src/components/text-area/text-area.test.tsx
@@ -81,7 +81,7 @@ describe('TextArea', () => {
 
         const container = getByTestId(wrapper, 'container');
         const charCounter = getByTestId(wrapper, 'char-counter');
-        expect(container.prop('invalid')).toBe(true);
+        expect(container.prop('valid')).toBe(false);
         expect(charCounter.prop('valid')).toBe(false);
     });
 
diff --git a/packages/react/src/components/text-area/text-area.tsx b/packages/react/src/components/text-area/text-area.tsx
index fbe038fd4f..f64762d75e 100644
--- a/packages/react/src/components/text-area/text-area.tsx
+++ b/packages/react/src/components/text-area/text-area.tsx
@@ -4,7 +4,7 @@ import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { v4 as uuid } from '../../utils/uuid';
-import { FormFieldContainer } from '../form/form-container/form-field-container';
+import { FieldContainer } from '../field/field-container';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
 import { ScreenReaderOnlyText } from '../screen-reader-only-text/ScreenReaderOnlyText';
@@ -137,7 +137,7 @@ export const TextArea: VoidFunctionComponent<TextAreaProps> = ({
     ]);
 
     return (
-        <FormFieldContainer
+        <FieldContainer
             data-testid="container"
             className={className}
             noMargin={noMargin}
@@ -146,7 +146,7 @@ export const TextArea: VoidFunctionComponent<TextAreaProps> = ({
             required={required}
             tooltip={tooltip}
             hint={hint}
-            invalid={!validity}
+            valid={validity}
             validationErrorMessage={getValidationErrorMessage()}
         >
             <StyledTextArea
@@ -176,6 +176,6 @@ export const TextArea: VoidFunctionComponent<TextAreaProps> = ({
                     <span aria-hidden="true">{t('characters', { length: inputValueLength, max: maxLength })}</span>
                 </Counter>
             )}
-        </FormFieldContainer>
+        </FieldContainer>
     );
 };
diff --git a/packages/react/src/components/text-input/styles/inputs.tsx b/packages/react/src/components/text-input/styles/inputs.tsx
index 601caa7d0c..9b10a4ea29 100644
--- a/packages/react/src/components/text-input/styles/inputs.tsx
+++ b/packages/react/src/components/text-input/styles/inputs.tsx
@@ -4,7 +4,7 @@ import { useId } from '../../../hooks/use-id';
 import { ResolvedTheme } from '../../../themes/theme';
 import { focus } from '../../../utils/css-state';
 import { DeviceContextProps, useDeviceContext } from '../../device-context-provider/device-context-provider';
-import { FormFieldControlProps, useFormFieldContext } from '../../form/form-field-context';
+import { FieldControlProps, useFieldControlContext } from '../../field/context';
 
 export interface InputStyleOptions {
     theme: ResolvedTheme,
@@ -94,41 +94,22 @@ const StyledInput = styled.input<{ isMobile: boolean; }>`
     ${({ theme, isMobile }) => inputsStyle({ theme, isMobile })}
 `;
 
-type PartialInputProps = Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
-    | 'id'
-    | 'className'
-    | 'type'
-    | 'name'
-    | 'value'
-    | 'defaultValue'
-    | 'placeholder'
-    | 'disabled'
-    | 'required'
-    | 'pattern'
-    | 'onBlur'
-    | 'onChange'
-    | 'onClick'
-    | 'onFocus'
-    | 'onKeyUp'
-    | 'onKeyDown'
-    | 'onMouseUp'
-    | 'onInvalid'
-    | 'inputMode'
-    | 'autoComplete'
+type BaseInputProps = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+    | 'ref'
 >;
 
-type PartialFormFieldProps = Pick<FormFieldControlProps,
+type CommonFieldControlProps = Pick<FieldControlProps,
     | 'ariaLabel'
     | 'ariaLabelledby'
     | 'ariaDescribedby'
-    | 'invalid'
+    | 'valid'
 >;
 
-export type InputProps = PartialInputProps & PartialFormFieldProps;
+export type InputProps = BaseInputProps & CommonFieldControlProps;
 
 export const Input = forwardRef(({
     id: providedId,
-    invalid: providedInvalid = true,
+    valid: providedValid = true,
     required: providedRequired = false,
     disabled: providedDisabled = false,
     ...otherProps
@@ -137,14 +118,14 @@ export const Input = forwardRef(({
     const inputId = useId(providedId);
 
     const {
-        formId,
+        id = inputId,
+        valid = providedValid,
+        required = providedRequired,
+        disabled = providedDisabled,
         ariaLabel,
         ariaLabelledby,
         ariaDescribedby,
-        invalid = providedInvalid,
-        required = providedRequired,
-        disabled = providedDisabled,
-    } = useFormFieldContext(otherProps);
+    } = useFieldControlContext(otherProps);
 
     return (
         <StyledInput
@@ -153,9 +134,9 @@ export const Input = forwardRef(({
             aria-describedby={ariaDescribedby}
             aria-disabled={disabled}
             aria-required={required}
-            aria-invalid={invalid}
+            aria-invalid={valid}
             data-testid="input"
-            id={formId || inputId}
+            id={id}
             disabled={disabled}
             required={required}
             isMobile={isMobile}
diff --git a/packages/react/src/components/text-input/text-input.test.tsx b/packages/react/src/components/text-input/text-input.test.tsx
index 438cf2244f..fd47712801 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx
+++ b/packages/react/src/components/text-input/text-input.test.tsx
@@ -48,7 +48,7 @@ describe('TextInput', () => {
         const wrapper = shallow(<TextInput {...initialProps} />);
 
         const container = getByTestId(wrapper, 'field-container');
-        expect(container.prop('invalid')).toBe(false);
+        expect(container.prop('valid')).toBe(true);
     });
 
     test('should set as invalid when invalid event is triggered', () => {
@@ -57,21 +57,21 @@ describe('TextInput', () => {
         getByTestId(wrapper, 'text-input').simulate('invalid');
 
         const container = getByTestId(wrapper, 'field-container');
-        expect(container.prop('invalid')).toBe(true);
+        expect(container.prop('valid')).toBe(false);
     });
 
     test('should set as invalid when valid prop is false', () => {
         const wrapper = shallow(<TextInput valid={false} />);
 
         const container = getByTestId(wrapper, 'field-container');
-        expect(container.prop('invalid')).toBe(true);
+        expect(container.prop('valid')).toBe(false);
     });
 
     test('should set as valid when valid prop is true', () => {
         const wrapper = shallow(<TextInput valid />);
 
         const container = getByTestId(wrapper, 'field-container');
-        expect(container.prop('invalid')).toBe(false);
+        expect(container.prop('valid')).toBe(true);
     });
 
     test('should set as invalid when valid prop is false and input trigger blur with checkValidity is true', () => {
@@ -81,7 +81,7 @@ describe('TextInput', () => {
         textInput.simulate('blur', { currentTarget: { checkValidity: () => true } });
         const container = getByTestId(wrapper, 'field-container');
 
-        expect(container.prop('invalid')).toBe(true);
+        expect(container.prop('valid')).toBe(false);
     });
 
     test('should set as valid when valid prop is true and input trigger blur with checkValidity is true', () => {
@@ -91,7 +91,7 @@ describe('TextInput', () => {
         textInput.simulate('blur', { currentTarget: { checkValidity: () => true } });
         const container = getByTestId(wrapper, 'field-container');
 
-        expect(container.prop('invalid')).toBe(false);
+        expect(container.prop('valid')).toBe(true);
     });
 
     test('should set as valid when valid prop is true and input trigger blur with checkValidity is false', () => {
@@ -101,7 +101,7 @@ describe('TextInput', () => {
         textInput.simulate('blur', { currentTarget: { checkValidity: () => false } });
         const container = getByTestId(wrapper, 'field-container');
 
-        expect(container.prop('invalid')).toBe(false);
+        expect(container.prop('valid')).toBe(true);
     });
 
     test('should set as invalid when valid prop is false and input trigger blur with checkValidity is false', () => {
@@ -111,7 +111,7 @@ describe('TextInput', () => {
         textInput.simulate('blur', { currentTarget: { checkValidity: () => false } });
         const container = getByTestId(wrapper, 'field-container');
 
-        expect(container.prop('invalid')).toBe(true);
+        expect(container.prop('valid')).toBe(false);
     });
 
     test('onChange callback is called when content is changed', () => {
diff --git a/packages/react/src/components/text-input/text-input.tsx b/packages/react/src/components/text-input/text-input.tsx
index 07db1cad42..0ea9fedcc1 100644
--- a/packages/react/src/components/text-input/text-input.tsx
+++ b/packages/react/src/components/text-input/text-input.tsx
@@ -17,7 +17,7 @@ import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FormFieldContainer } from '../form/form-container/form-field-container';
+import { FieldContainer } from '../field/field-container';
 import { TooltipProps } from '../tooltip/tooltip';
 import { inputsStyle } from './styles/inputs';
 import { useAriaConditionalIds } from '../../hooks/use-aria-conditional-ids';
@@ -138,14 +138,14 @@ export const TextInput = forwardRef(({
     }, [valid]);
 
     return (
-        <FormFieldContainer
+        <FieldContainer
             className={className}
             noMargin={noMargin}
             id={fieldId}
             label={label}
             required={required}
             tooltip={tooltip}
-            invalid={!validity}
+            valid={validity}
             validationErrorMessage={validationErrorMessage || t('validationErrorMessage')}
             hint={hint}
             data-testid="field-container"
@@ -176,7 +176,7 @@ export const TextInput = forwardRef(({
                 value={value}
                 {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
             />
-        </FormFieldContainer>
+        </FieldContainer>
     );
 });
 

From e70a4cbe64d6946593cab99e3b2a80f05fda3cde Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 1 Aug 2024 12:59:36 -0400
Subject: [PATCH 08/23] chore(field-container): refactor

---
 .../combobox/combobox.test.tsx.snap           | 37 +++++-----
 .../date-picker/date-picker.test.tsx.snap     |  5 +-
 .../dropdown-list/dropdown-list.test.tsx.snap | 69 +++++++++++--------
 .../feedbacks/invalid-field-message.test.tsx  |  9 ++-
 .../invalid-field-message.test.tsx.snap       |  5 +-
 .../field/feedbacks/invalid-field-message.tsx | 33 +++++----
 .../components/field/field-container.test.tsx | 10 +--
 .../field/field-container.test.tsx.snap       |  5 +-
 .../src/components/field/field-container.tsx  | 41 +++++------
 .../react/src/components/field/hint/hint.tsx  | 38 ++++++++++
 packages/react/src/components/field/utils.ts  | 12 ++--
 .../react/src/components/label/label.test.tsx |  4 +-
 packages/react/src/components/label/label.tsx | 27 ++++----
 .../numeric-input/numeric-input.test.tsx.snap |  5 +-
 .../password-input.test.tsx.snap              |  5 +-
 .../search/search-input.test.tsx.snap         |  2 +-
 .../src/components/search/search-input.tsx    |  2 +-
 .../stepper-input/stepper-input.test.tsx.snap |  5 +-
 18 files changed, 189 insertions(+), 125 deletions(-)
 create mode 100644 packages/react/src/components/field/hint/hint.tsx

diff --git a/packages/react/src/components/combobox/combobox.test.tsx.snap b/packages/react/src/components/combobox/combobox.test.tsx.snap
index f66b0ab0b5..b1ec71fd84 100644
--- a/packages/react/src/components/combobox/combobox.test.tsx.snap
+++ b/packages/react/src/components/combobox/combobox.test.tsx.snap
@@ -775,10 +775,11 @@ input + .c2 {
   >
     Select an option
   </label>
-  <span
+  <label
     aria-live="polite"
     class="c4"
     data-testid="invalid-field"
+    for="uuid1"
     id="uuid1_invalid"
     role="alert"
   >
@@ -790,7 +791,7 @@ input + .c2 {
       width="16"
     />
     You must select an option
-  </span>
+  </label>
   <div
     class="c6"
   >
@@ -1540,6 +1541,18 @@ input + .c2 {
   margin-left: var(--spacing-half);
 }
 
+.c4 {
+  color: #60666E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
 .c0 {
   margin: 0 0 var(--spacing-3x);
 }
@@ -1554,18 +1567,6 @@ input + .c2 {
   margin-bottom: var(--spacing-half);
 }
 
-.c4 {
-  color: #60666E;
-  display: block;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-}
-
 .c10 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
@@ -1729,12 +1730,16 @@ input + .c2 {
   >
     Select an option
   </label>
-  <span
+  <label
+    aria-live="polite"
     class="c4"
+    data-testid="invalid-field"
+    for="uuid1"
     id="uuid1_hint"
+    role="alert"
   >
     Hint
-  </span>
+  </label>
   <div
     class="c5"
   >
diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
index 4ae3f7e6ec..4faacdbb53 100644
--- a/packages/react/src/components/date-picker/date-picker.test.tsx.snap
+++ b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -1954,10 +1954,11 @@ label + .c5 {
   >
     date
   </label>
-  <span
+  <label
     aria-live="polite"
     class="c3"
     data-testid="invalid-field"
+    for="uuid1"
     id="uuid1_invalid"
     role="alert"
   >
@@ -1969,7 +1970,7 @@ label + .c5 {
       width="16"
     />
     Invalid date
-  </span>
+  </label>
   <div
     class="c5 c6"
   >
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
index c67260b29b..19683c11a9 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
+++ b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
@@ -453,6 +453,18 @@ input + .c2 {
   margin-left: var(--spacing-half);
 }
 
+.c4 {
+  color: #60666E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
 .c0 {
   margin: 0 0 var(--spacing-3x);
 }
@@ -467,18 +479,6 @@ input + .c2 {
   margin-bottom: var(--spacing-half);
 }
 
-.c4 {
-  color: #60666E;
-  display: block;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-}
-
 .c9 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
@@ -670,12 +670,16 @@ input + .c2 {
   >
     Select an option
   </label>
-  <span
+  <label
+    aria-live="polite"
     class="c4"
+    data-testid="invalid-field"
+    for="uuid1"
     id="uuid1_hint"
+    role="alert"
   >
     Hint
-  </span>
+  </label>
   <div
     aria-activedescendant="uuid1_ab"
     aria-controls="uuid1_listbox"
@@ -1143,10 +1147,11 @@ input + .c2 {
   >
     Select an option
   </label>
-  <span
+  <label
     aria-live="polite"
     class="c4"
     data-testid="invalid-field"
+    for="uuid1"
     id="uuid1_invalid"
     role="alert"
   >
@@ -1158,7 +1163,7 @@ input + .c2 {
       width="16"
     />
     You must select an option
-  </span>
+  </label>
   <div
     aria-activedescendant="uuid1_ab"
     aria-controls="uuid1_listbox"
@@ -2355,6 +2360,18 @@ input + .c2 {
   margin-left: var(--spacing-half);
 }
 
+.c4 {
+  color: #60666E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
 .c0 {
   margin: 0 0 var(--spacing-3x);
 }
@@ -2369,18 +2386,6 @@ input + .c2 {
   margin-bottom: var(--spacing-half);
 }
 
-.c4 {
-  color: #60666E;
-  display: block;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-}
-
 .c8 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
@@ -2567,12 +2572,16 @@ input + .c2 {
   >
     Select an option
   </label>
-  <span
+  <label
+    aria-live="polite"
     class="c4"
+    data-testid="invalid-field"
+    for="uuid1"
     id="uuid1_hint"
+    role="alert"
   >
     Hint
-  </span>
+  </label>
   <div
     aria-activedescendant="uuid1_ab"
     aria-controls="uuid1_listbox"
diff --git a/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx b/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx
index 50226f7c54..0253b76e8e 100644
--- a/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx
+++ b/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx
@@ -3,7 +3,14 @@ import { InvalidFieldMessage } from './invalid-field-message';
 
 describe('Invalid field', () => {
     test('Matches the snapshot', () => {
-        const tree = renderWithTheme(<InvalidFieldMessage controlId="test-id" feedbackMsg="Feedback Message" />);
+        const tree = renderWithTheme(
+            <InvalidFieldMessage
+                id="test-id"
+                htmlFor='input-id'
+            >
+                Feedback Message
+            </InvalidFieldMessage>,
+        );
 
         expect(tree).toMatchSnapshot();
     });
diff --git a/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap b/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap
index e4d6ab8723..846c7b3479 100644
--- a/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap
+++ b/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap
@@ -27,10 +27,11 @@ exports[`Invalid field Matches the snapshot 1`] = `
   margin-right: var(--spacing-base);
 }
 
-<span
+<label
   aria-live="polite"
   class="c0"
   data-testid="invalid-field"
+  for="input-id"
   id="test-id"
   role="alert"
 >
@@ -42,5 +43,5 @@ exports[`Invalid field Matches the snapshot 1`] = `
     width="16"
   />
   Feedback Message
-</span>
+</label>
 `;
diff --git a/packages/react/src/components/field/feedbacks/invalid-field-message.tsx b/packages/react/src/components/field/feedbacks/invalid-field-message.tsx
index a0abc07df3..ace42b78b8 100644
--- a/packages/react/src/components/field/feedbacks/invalid-field-message.tsx
+++ b/packages/react/src/components/field/feedbacks/invalid-field-message.tsx
@@ -1,15 +1,16 @@
-import { VoidFunctionComponent } from 'react';
+import { PropsWithChildren, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useDeviceContext } from '../../device-context-provider/device-context-provider';
 import { Icon } from '../../icon/icon';
+import { BaseLabelProps } from '../../label/label';
 
-const Field = styled.span<{ isMobile: boolean }>`
+const StyledValidationMessage = styled.label<{ $isMobile: boolean }>`
     color: ${(props) => props.theme.component['field-error-text-color']};
     display: flex;
-    font-size: ${({ isMobile }) => (isMobile ? '0.875rem' : '0.75rem')};
+    font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
     font-weight: var(--font-normal);
     letter-spacing: 0.02rem;
-    line-height: ${({ isMobile }) => (isMobile ? '1.5rem' : '1.25rem')};
+    line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
 `;
 
 const StyledIcon = styled(Icon)`
@@ -18,28 +19,30 @@ const StyledIcon = styled(Icon)`
     margin-right: var(--spacing-base);
 `;
 
-interface InvalidFieldMessageProps {
-    controlId?: string;
-    feedbackMsg: string;
-    noIcon?: boolean;
+export interface InvalidFieldMessageProps extends BaseLabelProps {
+    noInvalidFieldIcon?: boolean;
+    htmlFor: string;
 }
 
-const InvalidFieldMessage: VoidFunctionComponent<InvalidFieldMessageProps> = ({ controlId, feedbackMsg, noIcon }) => {
+const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<InvalidFieldMessageProps>> = ({
+    children, id, noInvalidFieldIcon, htmlFor,
+}) => {
     const { isMobile } = useDeviceContext();
 
     return (
-        <Field
+        <StyledValidationMessage
             data-testid="invalid-field"
             aria-live="polite"
-            id={controlId}
-            isMobile={isMobile}
+            htmlFor={htmlFor}
+            id={id}
+            $isMobile={isMobile}
             role="alert"
         >
-            {!noIcon && (
+            {!noInvalidFieldIcon && (
                 <StyledIcon name="alertOctagon" size={isMobile ? '24' : '16'} />
             )}
-            {feedbackMsg}
-        </Field>
+            {children}
+        </StyledValidationMessage>
     );
 };
 
diff --git a/packages/react/src/components/field/field-container.test.tsx b/packages/react/src/components/field/field-container.test.tsx
index 557caa829d..9865166563 100644
--- a/packages/react/src/components/field/field-container.test.tsx
+++ b/packages/react/src/components/field/field-container.test.tsx
@@ -215,7 +215,7 @@ describe('Field Container', () => {
                 consoleSpy.mockRestore();
             });
 
-            test('shouldn\'t contain idInvalid when FormContainer is valid', () => {
+            test('shouldn\'t contain idInvalid when FieldContainer is valid', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
@@ -232,7 +232,7 @@ describe('Field Container', () => {
                 consoleSpy.mockRestore();
             });
 
-            test('should contain idInvalid when FormContainer is invalid', () => {
+            test('should contain idInvalid when FieldContainer is invalid', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
@@ -279,7 +279,7 @@ describe('Field Container', () => {
         });
 
         describe('aria-invalid', () => {
-            test('should be true when Formfield is invalid', () => {
+            test('should be true when FieldContainer is invalid', () => {
                 const wrapper = renderWithProviders(
                     <FieldContainer
                         label={label}
@@ -298,7 +298,7 @@ describe('Field Container', () => {
         });
 
         describe('aria-required', () => {
-            test('should be true when Formfield is required', () => {
+            test('should be true when FieldContainer is required', () => {
                 const wrapper = renderWithProviders(
                     <FieldContainer label={label} hint={hint} id={providedId} required validationErrorMessage="">
                         <Input />
@@ -311,7 +311,7 @@ describe('Field Container', () => {
         });
 
         describe('aria-disabled', () => {
-            test('should be true when FormContainer is disabled', () => {
+            test('should be true when FieldContainer is disabled', () => {
                 const wrapper = renderWithProviders(
                     <FieldContainer label={label} hint={hint} id={providedId} disabled validationErrorMessage="">
                         <Input />
diff --git a/packages/react/src/components/field/field-container.test.tsx.snap b/packages/react/src/components/field/field-container.test.tsx.snap
index b4dd3624d1..6bd918059a 100644
--- a/packages/react/src/components/field/field-container.test.tsx.snap
+++ b/packages/react/src/components/field/field-container.test.tsx.snap
@@ -88,10 +88,11 @@ exports[`Field Container Styling matches invalid snapshot 1`] = `
 <div
   class="c0"
 >
-  <span
+  <label
     aria-live="polite"
     class="c1"
     data-testid="invalid-field"
+    for="id"
     id="id_invalid"
     role="alert"
   >
@@ -103,7 +104,7 @@ exports[`Field Container Styling matches invalid snapshot 1`] = `
       width="16"
     />
     This text area input is invalid
-  </span>
+  </label>
   Children
 </div>
 `;
diff --git a/packages/react/src/components/field/field-container.tsx b/packages/react/src/components/field/field-container.tsx
index 7ae74fd421..38fa120257 100644
--- a/packages/react/src/components/field/field-container.tsx
+++ b/packages/react/src/components/field/field-container.tsx
@@ -1,11 +1,10 @@
 import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
 import styled from 'styled-components';
 import { useId } from '../../hooks/use-id';
-import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { FieldControlContext, FieldControlProps } from './context';
-import { InvalidFieldMessage } from './feedbacks/invalid-field-message';
-import { Label } from '../label/label';
-import { TooltipProps } from '../tooltip/tooltip';
+import { InvalidFieldMessage, InvalidFieldMessageProps } from './feedbacks/invalid-field-message';
+import { Label, LabelProps } from '../label/label';
+import { Hint } from './hint/hint';
 import { getAriaDescribedby, getAriaLabel, getAriaLabelledby, getSlotIds } from './utils';
 
 interface StyledDivProps {
@@ -29,22 +28,15 @@ const StyledDiv = styled.div<StyledDivProps>`
     }
 `;
 
-const StyledHint = styled.span<{ $isMobile: boolean }>`
-    color: ${(props) => props.theme.component['field-hint-text-color']};
-    display: block;
-    font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
-    font-weight: var(--font-normal);
-    letter-spacing: 0.02rem;
-    line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
-`;
+type CommonLabelProps = Pick<LabelProps, 'tooltip'>;
+
+type CommonValidationMessageProps = Pick<InvalidFieldMessageProps, 'noInvalidFieldIcon'>;
 
-export interface FieldContainerProps extends FieldControlProps {
+export interface FieldContainerProps extends FieldControlProps, CommonLabelProps, CommonValidationMessageProps {
     className?: string;
     noMargin?: boolean;
-    tooltip?: TooltipProps;
     label?: string;
     hint?: string;
-    noInvalidFieldIcon?: boolean;
     validationErrorMessage: string;
 }
 
@@ -66,7 +58,6 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
     validationErrorMessage,
     ...props
 }) => {
-    const { isMobile } = useDeviceContext();
     const fieldId = useId(providedId);
 
     const slotIds = getSlotIds(fieldId, label, hint, (validationErrorMessage && !valid));
@@ -98,7 +89,7 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
                 {label && (
                     <Label
                         id={slotIds.label}
-                        forId={fieldId}
+                        htmlFor={fieldId}
                         tooltip={tooltip}
                         required={required}
                     >
@@ -106,19 +97,21 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
                     </Label>
                 )}
                 {hint && (
-                    <StyledHint
+                    <Hint
                         id={slotIds.hint}
-                        $isMobile={isMobile}
+                        htmlFor={fieldId}
                     >
                         {hint}
-                    </StyledHint>
+                    </Hint>
                 )}
                 {!valid && (
                     <InvalidFieldMessage
-                        controlId={slotIds.invalid}
-                        feedbackMsg={validationErrorMessage}
-                        noIcon={noInvalidFieldIcon}
-                    />
+                        id={slotIds.invalid}
+                        htmlFor={fieldId}
+                        noInvalidFieldIcon={noInvalidFieldIcon}
+                    >
+                        {validationErrorMessage}
+                    </InvalidFieldMessage>
                 )}
                 {children}
             </StyledDiv>
diff --git a/packages/react/src/components/field/hint/hint.tsx b/packages/react/src/components/field/hint/hint.tsx
new file mode 100644
index 0000000000..47a78c8e4e
--- /dev/null
+++ b/packages/react/src/components/field/hint/hint.tsx
@@ -0,0 +1,38 @@
+import { PropsWithChildren, VoidFunctionComponent } from 'react';
+import styled from 'styled-components';
+import { useDeviceContext } from '../../device-context-provider/device-context-provider';
+import { BaseLabelProps } from '../../label/label';
+
+const StyledHint = styled.label<{ $isMobile: boolean }>`
+    color: ${(props) => props.theme.component['field-hint-text-color']};
+    display: block;
+    font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
+    font-weight: var(--font-normal);
+    letter-spacing: 0.02rem;
+    line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
+`;
+
+export interface HintProps extends BaseLabelProps {
+    htmlFor: string;
+}
+
+const Hint: VoidFunctionComponent<PropsWithChildren<HintProps>> = ({
+    children, id, htmlFor,
+}) => {
+    const { isMobile } = useDeviceContext();
+
+    return (
+        <StyledHint
+            data-testid="invalid-field"
+            aria-live="polite"
+            htmlFor={htmlFor}
+            id={id}
+            $isMobile={isMobile}
+            role="alert"
+        >
+            {children}
+        </StyledHint>
+    );
+};
+
+export { Hint };
diff --git a/packages/react/src/components/field/utils.ts b/packages/react/src/components/field/utils.ts
index 0bdb4cf769..49893fbff4 100644
--- a/packages/react/src/components/field/utils.ts
+++ b/packages/react/src/components/field/utils.ts
@@ -8,20 +8,20 @@ interface FieldIds {
     invalid?: string;
 }
 
-export function getSlotId(prop: ReactNode, formFieldId: string, propName: string): string | undefined {
-    return prop ? `${formFieldId}_${propName}` : undefined;
+export function getSlotId(prop: ReactNode, fieldId: string, propName: string): string | undefined {
+    return prop ? `${fieldId}_${propName}` : undefined;
 }
 
 export function getSlotIds(
-    formFieldId: string,
+    fieldId: string,
     label?: ReactNode,
     hint?: ReactNode,
     invalid?: ReactNode,
 ): FieldIds {
     return {
-        label: getSlotId(label, formFieldId, 'label'),
-        hint: getSlotId(hint, formFieldId, 'hint'),
-        invalid: getSlotId(invalid, formFieldId, 'invalid'),
+        label: getSlotId(label, fieldId, 'label'),
+        hint: getSlotId(hint, fieldId, 'hint'),
+        invalid: getSlotId(invalid, fieldId, 'invalid'),
     };
 }
 
diff --git a/packages/react/src/components/label/label.test.tsx b/packages/react/src/components/label/label.test.tsx
index 1cc1f09c8e..8eeaa77991 100644
--- a/packages/react/src/components/label/label.test.tsx
+++ b/packages/react/src/components/label/label.test.tsx
@@ -4,14 +4,14 @@ import { Label } from './label';
 
 describe('Label', () => {
     test('contains tooltip when tooltip prop is defined', () => {
-        const wrapper = mountWithTheme(<Label forId="test" tooltip={{ label: 'test' }}>Test</Label>);
+        const wrapper = mountWithTheme(<Label htmlFor="test" tooltip={{ label: 'test' }}>Test</Label>);
 
         expect(wrapper.find(Tooltip).exists()).toBe(true);
     });
 
     test('Matches the snapshot', () => {
         const tree = renderWithTheme(
-            <Label forId="test-id">
+            <Label htmlFor="test-id">
                 Children
             </Label>,
         );
diff --git a/packages/react/src/components/label/label.tsx b/packages/react/src/components/label/label.tsx
index d97404eaa4..8558a610d4 100644
--- a/packages/react/src/components/label/label.tsx
+++ b/packages/react/src/components/label/label.tsx
@@ -1,10 +1,11 @@
-import { Fragment, FunctionComponent, PropsWithChildren } from 'react';
+import { DetailedHTMLProps, Fragment, FunctionComponent, LabelHTMLAttributes, PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { FieldControlProps } from '../field/context';
 import { Tooltip, TooltipProps } from '../tooltip/tooltip';
 import { useTranslation } from '../../i18n/use-translation';
 
-const StyledDiv = styled.div`
+const StyledWrapper = styled.div`
     align-items: center;
     display: flex;
 `;
@@ -28,11 +29,14 @@ const StyledTooltip = styled(Tooltip)`
     margin-left: calc(var(--spacing-1x) * 1.5);
 `;
 
-interface LabelProps {
-    className?: string;
-    forId: string;
-    id?: string;
-    required?: boolean;
+export type BaseLabelProps = Pick<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>,
+    | 'id' | 'className'
+>;
+
+type CommonFieldControlProps = Pick<FieldControlProps, 'required'>;
+
+export interface LabelProps extends BaseLabelProps, CommonFieldControlProps {
+    htmlFor: string;
     requiredLabelType?: 'text';
     tooltip?: TooltipProps;
 }
@@ -58,19 +62,18 @@ const RequiredLabel: FunctionComponent<RequiredLabelProps> = ({ type }) => {
 };
 
 const Label: FunctionComponent<PropsWithChildren<LabelProps>> = ({
-    className, children, forId, id, tooltip, required, requiredLabelType = 'text',
+    className, children, htmlFor, id, tooltip, required, requiredLabelType = 'text',
 }) => {
-    const WrapperComponent = tooltip ? StyledDiv : Fragment;
+    const WrapperComponent = tooltip ? StyledWrapper : Fragment;
     const { isMobile } = useDeviceContext();
 
     return (
         <WrapperComponent>
-            <StyledLabel className={className} htmlFor={forId} id={id} isMobile={isMobile}>
+            <StyledLabel className={className} htmlFor={htmlFor} id={id} isMobile={isMobile}>
                 {children}
                 {required && <RequiredLabel type={requiredLabelType} />}
             </StyledLabel>
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            {tooltip && <StyledTooltip {...tooltip} />}
+            {tooltip && <StyledTooltip {...tooltip} /* eslint-disable-line react/jsx-props-no-spreading */ />}
         </WrapperComponent>
     );
 };
diff --git a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
index f14e12e6d6..97f50fa285 100644
--- a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
+++ b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
@@ -306,10 +306,11 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
 <div
   class="c0"
 >
-  <span
+  <label
     aria-live="polite"
     class="c1"
     data-testid="invalid-field"
+    for="uuid1"
     id="uuid1_invalid"
     role="alert"
   >
@@ -321,7 +322,7 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
       width="16"
     />
     This is an error message
-  </span>
+  </label>
   <div
     class="c3"
   >
diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index 5f931e59d3..6df062ba63 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -828,10 +828,11 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
 <div
   class="c0"
 >
-  <span
+  <label
     aria-live="polite"
     class="c1"
     data-testid="invalid-field"
+    for="uuid1"
     id="uuid1_invalid"
     role="alert"
   >
@@ -843,7 +844,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
       width="16"
     />
     This is an error message
-  </span>
+  </label>
   <div
     class="c3"
   >
diff --git a/packages/react/src/components/search/search-input.test.tsx.snap b/packages/react/src/components/search/search-input.test.tsx.snap
index 10519b93ff..7749bb047d 100644
--- a/packages/react/src/components/search/search-input.test.tsx.snap
+++ b/packages/react/src/components/search/search-input.test.tsx.snap
@@ -311,7 +311,7 @@ input:valid + .c8 {
         >
           <Label
             data-testid="search-icon"
-            forId="search-input"
+            htmlFor="search-input"
           >
             <styled.label
               htmlFor="search-input"
diff --git a/packages/react/src/components/search/search-input.tsx b/packages/react/src/components/search/search-input.tsx
index 1b99efad2a..05b3ad25d0 100644
--- a/packages/react/src/components/search/search-input.tsx
+++ b/packages/react/src/components/search/search-input.tsx
@@ -185,7 +185,7 @@ export const SearchInput: VoidFunctionComponent<SearchInputProps> = ({
         <SearchWrapper className={className}>
             <InnerWrapper>
                 {hasIcon && (
-                    <Label forId={id} data-testid="search-icon">
+                    <Label htmlFor={id} data-testid="search-icon">
                         <IcoSearch disabled={disabled} />
                         <VisuallyHidden>{label || t('label')}</VisuallyHidden>
                     </Label>
diff --git a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
index 2f96aeea4f..e859abdb96 100644
--- a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
+++ b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
@@ -595,10 +595,11 @@ input + .c1 {
   >
     test
   </label>
-  <span
+  <label
     aria-live="polite"
     class="c3"
     data-testid="invalid-field"
+    for="uuid1"
     id="uuid1_invalid"
     role="alert"
   >
@@ -610,7 +611,7 @@ input + .c1 {
       width="16"
     />
     Invalid number
-  </span>
+  </label>
   <div
     class="c5"
   >

From 4e6c93776a31b2900156a2be352cf98c6e4e4a52 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 1 Aug 2024 13:35:17 -0400
Subject: [PATCH 09/23] chore(field-container): refactor

---
 .../react/src/components/field/context.ts     | 11 +---
 .../field/feedbacks/invalid-field-message.tsx |  7 +-
 .../src/components/field/feedbacks/types.ts   |  6 ++
 .../components/field/field-container.test.tsx |  2 +-
 .../src/components/field/field-container.tsx  | 19 ++----
 .../react/src/components/field/hint/hint.tsx  |  6 +-
 .../react/src/components/field/hint/types.ts  |  3 +
 .../{ => field}/label/label.test.tsx          |  4 +-
 .../{ => field}/label/label.test.tsx.snap     |  0
 .../components/{ => field}/label/label.tsx    | 34 +++-------
 .../react/src/components/field/label/types.ts | 16 +++++
 packages/react/src/components/field/types.ts  | 21 ++++++
 packages/react/src/components/field/utils.ts  |  8 +--
 packages/react/src/components/input/input.tsx | 52 +++++++++++++++
 packages/react/src/components/input/types.ts  | 15 +++++
 .../src/components/search/search-input.tsx    |  2 +-
 .../components/text-input/styles/inputs.tsx   | 65 +------------------
 17 files changed, 139 insertions(+), 132 deletions(-)
 create mode 100644 packages/react/src/components/field/feedbacks/types.ts
 create mode 100644 packages/react/src/components/field/hint/types.ts
 rename packages/react/src/components/{ => field}/label/label.test.tsx (80%)
 rename packages/react/src/components/{ => field}/label/label.test.tsx.snap (100%)
 rename packages/react/src/components/{ => field}/label/label.tsx (58%)
 create mode 100644 packages/react/src/components/field/label/types.ts
 create mode 100644 packages/react/src/components/field/types.ts
 create mode 100644 packages/react/src/components/input/input.tsx
 create mode 100644 packages/react/src/components/input/types.ts

diff --git a/packages/react/src/components/field/context.ts b/packages/react/src/components/field/context.ts
index 9cf68b17ea..5b354e3468 100644
--- a/packages/react/src/components/field/context.ts
+++ b/packages/react/src/components/field/context.ts
@@ -1,14 +1,5 @@
 import { createContext, useContext } from 'react';
-
-export interface FieldControlProps {
-    id?: string;
-    ariaLabel?: string;
-    ariaLabelledby?: string;
-    ariaDescribedby?: string
-    disabled?: boolean;
-    required?: boolean;
-    valid?: boolean;
-}
+import { FieldControlProps } from './types';
 
 export const FieldControlContext = createContext<FieldControlProps>({});
 
diff --git a/packages/react/src/components/field/feedbacks/invalid-field-message.tsx b/packages/react/src/components/field/feedbacks/invalid-field-message.tsx
index ace42b78b8..7583512b28 100644
--- a/packages/react/src/components/field/feedbacks/invalid-field-message.tsx
+++ b/packages/react/src/components/field/feedbacks/invalid-field-message.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useDeviceContext } from '../../device-context-provider/device-context-provider';
 import { Icon } from '../../icon/icon';
-import { BaseLabelProps } from '../../label/label';
+import { InvalidFieldMessageProps } from './types';
 
 const StyledValidationMessage = styled.label<{ $isMobile: boolean }>`
     color: ${(props) => props.theme.component['field-error-text-color']};
@@ -19,11 +19,6 @@ const StyledIcon = styled(Icon)`
     margin-right: var(--spacing-base);
 `;
 
-export interface InvalidFieldMessageProps extends BaseLabelProps {
-    noInvalidFieldIcon?: boolean;
-    htmlFor: string;
-}
-
 const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<InvalidFieldMessageProps>> = ({
     children, id, noInvalidFieldIcon, htmlFor,
 }) => {
diff --git a/packages/react/src/components/field/feedbacks/types.ts b/packages/react/src/components/field/feedbacks/types.ts
new file mode 100644
index 0000000000..00e86f2e30
--- /dev/null
+++ b/packages/react/src/components/field/feedbacks/types.ts
@@ -0,0 +1,6 @@
+import { BaseLabelProps } from '../label/types';
+import { FieldContainerProps } from '../types';
+
+type CommonFieldContainerProps = Pick<FieldContainerProps, 'noInvalidFieldIcon'>;
+
+export interface InvalidFieldMessageProps extends BaseLabelProps, CommonFieldContainerProps {}
diff --git a/packages/react/src/components/field/field-container.test.tsx b/packages/react/src/components/field/field-container.test.tsx
index 9865166563..4d6c77561e 100644
--- a/packages/react/src/components/field/field-container.test.tsx
+++ b/packages/react/src/components/field/field-container.test.tsx
@@ -1,6 +1,6 @@
 import { renderWithProviders } from '../../test-utils/renderer';
 import { devConsole } from '../../utils/dev-console';
-import { Input } from '../text-input/styles/inputs';
+import { Input } from '../input/input';
 import {
     ARIA_LABEL_WARNING,
     getAriaDescribedby,
diff --git a/packages/react/src/components/field/field-container.tsx b/packages/react/src/components/field/field-container.tsx
index 38fa120257..2439636c73 100644
--- a/packages/react/src/components/field/field-container.tsx
+++ b/packages/react/src/components/field/field-container.tsx
@@ -1,10 +1,11 @@
 import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
 import styled from 'styled-components';
 import { useId } from '../../hooks/use-id';
-import { FieldControlContext, FieldControlProps } from './context';
-import { InvalidFieldMessage, InvalidFieldMessageProps } from './feedbacks/invalid-field-message';
-import { Label, LabelProps } from '../label/label';
+import { FieldControlContext } from './context';
+import { InvalidFieldMessage } from './feedbacks/invalid-field-message';
+import { Label } from './label/label';
 import { Hint } from './hint/hint';
+import { FieldContainerProps } from './types';
 import { getAriaDescribedby, getAriaLabel, getAriaLabelledby, getSlotIds } from './utils';
 
 interface StyledDivProps {
@@ -28,18 +29,6 @@ const StyledDiv = styled.div<StyledDivProps>`
     }
 `;
 
-type CommonLabelProps = Pick<LabelProps, 'tooltip'>;
-
-type CommonValidationMessageProps = Pick<InvalidFieldMessageProps, 'noInvalidFieldIcon'>;
-
-export interface FieldContainerProps extends FieldControlProps, CommonLabelProps, CommonValidationMessageProps {
-    className?: string;
-    noMargin?: boolean;
-    label?: string;
-    hint?: string;
-    validationErrorMessage: string;
-}
-
 export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerProps>> = ({
     id: providedId,
     ariaLabel: providedAriaLabel,
diff --git a/packages/react/src/components/field/hint/hint.tsx b/packages/react/src/components/field/hint/hint.tsx
index 47a78c8e4e..7c5f946328 100644
--- a/packages/react/src/components/field/hint/hint.tsx
+++ b/packages/react/src/components/field/hint/hint.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useDeviceContext } from '../../device-context-provider/device-context-provider';
-import { BaseLabelProps } from '../../label/label';
+import { HintProps } from './types';
 
 const StyledHint = styled.label<{ $isMobile: boolean }>`
     color: ${(props) => props.theme.component['field-hint-text-color']};
@@ -12,10 +12,6 @@ const StyledHint = styled.label<{ $isMobile: boolean }>`
     line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
 `;
 
-export interface HintProps extends BaseLabelProps {
-    htmlFor: string;
-}
-
 const Hint: VoidFunctionComponent<PropsWithChildren<HintProps>> = ({
     children, id, htmlFor,
 }) => {
diff --git a/packages/react/src/components/field/hint/types.ts b/packages/react/src/components/field/hint/types.ts
new file mode 100644
index 0000000000..01ffcf01ed
--- /dev/null
+++ b/packages/react/src/components/field/hint/types.ts
@@ -0,0 +1,3 @@
+import { BaseLabelProps } from '../label/types';
+
+export interface HintProps extends BaseLabelProps {}
diff --git a/packages/react/src/components/label/label.test.tsx b/packages/react/src/components/field/label/label.test.tsx
similarity index 80%
rename from packages/react/src/components/label/label.test.tsx
rename to packages/react/src/components/field/label/label.test.tsx
index 8eeaa77991..e7fbbac7d8 100644
--- a/packages/react/src/components/label/label.test.tsx
+++ b/packages/react/src/components/field/label/label.test.tsx
@@ -1,5 +1,5 @@
-import { mountWithTheme, renderWithTheme } from '../../test-utils/renderer';
-import { Tooltip } from '../tooltip/tooltip';
+import { mountWithTheme, renderWithTheme } from '../../../test-utils/renderer';
+import { Tooltip } from '../../tooltip/tooltip';
 import { Label } from './label';
 
 describe('Label', () => {
diff --git a/packages/react/src/components/label/label.test.tsx.snap b/packages/react/src/components/field/label/label.test.tsx.snap
similarity index 100%
rename from packages/react/src/components/label/label.test.tsx.snap
rename to packages/react/src/components/field/label/label.test.tsx.snap
diff --git a/packages/react/src/components/label/label.tsx b/packages/react/src/components/field/label/label.tsx
similarity index 58%
rename from packages/react/src/components/label/label.tsx
rename to packages/react/src/components/field/label/label.tsx
index 8558a610d4..7a1a033921 100644
--- a/packages/react/src/components/label/label.tsx
+++ b/packages/react/src/components/field/label/label.tsx
@@ -1,22 +1,22 @@
-import { DetailedHTMLProps, Fragment, FunctionComponent, LabelHTMLAttributes, PropsWithChildren } from 'react';
+import { Fragment, FunctionComponent, PropsWithChildren } from 'react';
 import styled from 'styled-components';
-import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldControlProps } from '../field/context';
-import { Tooltip, TooltipProps } from '../tooltip/tooltip';
-import { useTranslation } from '../../i18n/use-translation';
+import { useDeviceContext } from '../../device-context-provider/device-context-provider';
+import { Tooltip } from '../../tooltip/tooltip';
+import { useTranslation } from '../../../i18n/use-translation';
+import { LabelProps, RequiredLabelProps } from './types';
 
 const StyledWrapper = styled.div`
     align-items: center;
     display: flex;
 `;
 
-const StyledLabel = styled.label<{isMobile: boolean}>`
+const StyledLabel = styled.label<{$isMobile: boolean}>`
     color: ${(props) => props.theme.component['label-text-color']};
     display: block;
-    font-size: ${({ isMobile }) => (isMobile ? '0.875rem' : '0.75rem')};
+    font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
     font-weight: var(--font-normal);
     letter-spacing: 0.02rem;
-    line-height: ${({ isMobile }) => (isMobile ? '1.5rem' : '1.25rem')};
+    line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
     margin: 0;
     width: fit-content;
 
@@ -29,22 +29,6 @@ const StyledTooltip = styled(Tooltip)`
     margin-left: calc(var(--spacing-1x) * 1.5);
 `;
 
-export type BaseLabelProps = Pick<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>,
-    | 'id' | 'className'
->;
-
-type CommonFieldControlProps = Pick<FieldControlProps, 'required'>;
-
-export interface LabelProps extends BaseLabelProps, CommonFieldControlProps {
-    htmlFor: string;
-    requiredLabelType?: 'text';
-    tooltip?: TooltipProps;
-}
-
-interface RequiredLabelProps {
-    type?: LabelProps['requiredLabelType'];
-}
-
 const RequiredLabel: FunctionComponent<RequiredLabelProps> = ({ type }) => {
     const { t } = useTranslation('text-input');
 
@@ -69,7 +53,7 @@ const Label: FunctionComponent<PropsWithChildren<LabelProps>> = ({
 
     return (
         <WrapperComponent>
-            <StyledLabel className={className} htmlFor={htmlFor} id={id} isMobile={isMobile}>
+            <StyledLabel className={className} htmlFor={htmlFor} id={id} $isMobile={isMobile}>
                 {children}
                 {required && <RequiredLabel type={requiredLabelType} />}
             </StyledLabel>
diff --git a/packages/react/src/components/field/label/types.ts b/packages/react/src/components/field/label/types.ts
new file mode 100644
index 0000000000..fb90d6fffe
--- /dev/null
+++ b/packages/react/src/components/field/label/types.ts
@@ -0,0 +1,16 @@
+import { DetailedHTMLProps, LabelHTMLAttributes } from 'react';
+import { FieldContainerProps } from '../types';
+
+export type BaseLabelProps = Pick<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>,
+    | 'id' | 'className' | 'htmlFor'
+>;
+
+type CommonFieldContainerProps = Pick<FieldContainerProps, 'required' | 'tooltip'>;
+
+export interface LabelProps extends BaseLabelProps, CommonFieldContainerProps {
+    requiredLabelType?: 'text';
+}
+
+export interface RequiredLabelProps {
+    type?: LabelProps['requiredLabelType'];
+}
diff --git a/packages/react/src/components/field/types.ts b/packages/react/src/components/field/types.ts
new file mode 100644
index 0000000000..732d380db8
--- /dev/null
+++ b/packages/react/src/components/field/types.ts
@@ -0,0 +1,21 @@
+import { TooltipProps } from '../tooltip/tooltip';
+
+export interface FieldControlProps {
+    id?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string
+    disabled?: boolean;
+    required?: boolean;
+    valid?: boolean;
+}
+
+export interface FieldContainerProps extends FieldControlProps {
+    className?: string;
+    noMargin?: boolean;
+    label?: string;
+    hint?: string;
+    validationErrorMessage: string;
+    noInvalidFieldIcon?: boolean;
+    tooltip?: TooltipProps;
+}
diff --git a/packages/react/src/components/field/utils.ts b/packages/react/src/components/field/utils.ts
index 49893fbff4..1aeec1ebf3 100644
--- a/packages/react/src/components/field/utils.ts
+++ b/packages/react/src/components/field/utils.ts
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { devConsole } from '../../utils/dev-console';
 import { joinStrings } from '../../utils/string';
 
-interface FieldIds {
+interface FieldSlotIds {
     label?: string;
     hint?: string;
     invalid?: string;
@@ -17,7 +17,7 @@ export function getSlotIds(
     label?: ReactNode,
     hint?: ReactNode,
     invalid?: ReactNode,
-): FieldIds {
+): FieldSlotIds {
     return {
         label: getSlotId(label, fieldId, 'label'),
         hint: getSlotId(hint, fieldId, 'hint'),
@@ -50,14 +50,14 @@ export function getAriaLabel(
 }
 
 export function getAriaLabelledby(
-    { label }: FieldIds,
+    { label }: FieldSlotIds,
     additionalLabelledby?: string,
 ): string | undefined {
     return joinStrings(label, additionalLabelledby);
 }
 
 export function getAriaDescribedby(
-    { invalid, hint }: FieldIds,
+    { invalid, hint }: FieldSlotIds,
     additionalDescribedby?: string,
 ): string | undefined {
     return joinStrings(invalid, hint, additionalDescribedby);
diff --git a/packages/react/src/components/input/input.tsx b/packages/react/src/components/input/input.tsx
new file mode 100644
index 0000000000..a9f8ca1ed5
--- /dev/null
+++ b/packages/react/src/components/input/input.tsx
@@ -0,0 +1,52 @@
+import { forwardRef, ReactElement, Ref } from 'react';
+import styled from 'styled-components';
+import { useId } from '../../hooks/use-id';
+import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { useFieldControlContext } from '../field/context';
+import { inputsStyle } from '../text-input/styles/inputs';
+import { InputProps } from './types';
+
+const StyledInput = styled.input<{ isMobile: boolean; }>`
+    ${({ theme, isMobile }) => inputsStyle({ theme, isMobile })}
+`;
+
+export const Input = forwardRef(({
+    id: providedId,
+    valid: providedValid = true,
+    required: providedRequired = false,
+    disabled: providedDisabled = false,
+    ...otherProps
+}: InputProps, ref: Ref<HTMLInputElement>): ReactElement => {
+    const { isMobile } = useDeviceContext();
+    const inputId = useId(providedId);
+
+    const {
+        id = inputId,
+        valid = providedValid,
+        required = providedRequired,
+        disabled = providedDisabled,
+        ariaLabel,
+        ariaLabelledby,
+        ariaDescribedby,
+    } = useFieldControlContext(otherProps);
+
+    return (
+        <StyledInput
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabel ? undefined : ariaLabelledby}
+            aria-describedby={ariaDescribedby}
+            aria-disabled={disabled}
+            aria-required={required}
+            aria-invalid={valid}
+            data-testid="input"
+            id={id}
+            disabled={disabled}
+            required={required}
+            isMobile={isMobile}
+            ref={ref}
+            {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
+        />
+    );
+});
+
+Input.displayName = 'Input';
diff --git a/packages/react/src/components/input/types.ts b/packages/react/src/components/input/types.ts
new file mode 100644
index 0000000000..6008924bde
--- /dev/null
+++ b/packages/react/src/components/input/types.ts
@@ -0,0 +1,15 @@
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { FieldControlProps } from '../field/types';
+
+type BaseInputProps = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+    | 'ref'
+>;
+
+type CommonFieldControlProps = Pick<FieldControlProps,
+    | 'ariaLabel'
+    | 'ariaLabelledby'
+    | 'ariaDescribedby'
+    | 'valid'
+>;
+
+export type InputProps = BaseInputProps & CommonFieldControlProps;
diff --git a/packages/react/src/components/search/search-input.tsx b/packages/react/src/components/search/search-input.tsx
index 05b3ad25d0..64de662efb 100644
--- a/packages/react/src/components/search/search-input.tsx
+++ b/packages/react/src/components/search/search-input.tsx
@@ -7,7 +7,7 @@ import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { v4 as uuid } from '../../utils/uuid';
 import { SearchButton } from '../buttons/search-button';
-import { Label } from '../label/label';
+import { Label } from '../field/label/label';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { VisuallyHidden } from '../visually-hidden/visuallyhidden';
 
diff --git a/packages/react/src/components/text-input/styles/inputs.tsx b/packages/react/src/components/text-input/styles/inputs.tsx
index 9b10a4ea29..08df5ecd5b 100644
--- a/packages/react/src/components/text-input/styles/inputs.tsx
+++ b/packages/react/src/components/text-input/styles/inputs.tsx
@@ -1,10 +1,7 @@
-import { DetailedHTMLProps, forwardRef, InputHTMLAttributes, ReactElement, Ref } from 'react';
-import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
-import { useId } from '../../../hooks/use-id';
+import { css, FlattenSimpleInterpolation } from 'styled-components';
 import { ResolvedTheme } from '../../../themes/theme';
 import { focus } from '../../../utils/css-state';
-import { DeviceContextProps, useDeviceContext } from '../../device-context-provider/device-context-provider';
-import { FieldControlProps, useFieldControlContext } from '../../field/context';
+import { DeviceContextProps } from '../../device-context-provider/device-context-provider';
 
 export interface InputStyleOptions {
     theme: ResolvedTheme,
@@ -89,61 +86,3 @@ export const responsiveInputsStyle = ({ theme, device: { isMobile } }: Responsiv
 
     ${focus({ theme })};
 `;
-
-const StyledInput = styled.input<{ isMobile: boolean; }>`
-    ${({ theme, isMobile }) => inputsStyle({ theme, isMobile })}
-`;
-
-type BaseInputProps = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
-    | 'ref'
->;
-
-type CommonFieldControlProps = Pick<FieldControlProps,
-    | 'ariaLabel'
-    | 'ariaLabelledby'
-    | 'ariaDescribedby'
-    | 'valid'
->;
-
-export type InputProps = BaseInputProps & CommonFieldControlProps;
-
-export const Input = forwardRef(({
-    id: providedId,
-    valid: providedValid = true,
-    required: providedRequired = false,
-    disabled: providedDisabled = false,
-    ...otherProps
-}: InputProps, ref: Ref<HTMLInputElement>): ReactElement => {
-    const { isMobile } = useDeviceContext();
-    const inputId = useId(providedId);
-
-    const {
-        id = inputId,
-        valid = providedValid,
-        required = providedRequired,
-        disabled = providedDisabled,
-        ariaLabel,
-        ariaLabelledby,
-        ariaDescribedby,
-    } = useFieldControlContext(otherProps);
-
-    return (
-        <StyledInput
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabel ? undefined : ariaLabelledby}
-            aria-describedby={ariaDescribedby}
-            aria-disabled={disabled}
-            aria-required={required}
-            aria-invalid={valid}
-            data-testid="input"
-            id={id}
-            disabled={disabled}
-            required={required}
-            isMobile={isMobile}
-            ref={ref}
-            {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
-        />
-    );
-});
-
-Input.displayName = 'Input';

From 507141a545132546580bf034ef15bd8413b2b5fe Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 1 Aug 2024 13:37:29 -0400
Subject: [PATCH 10/23] chore(field-container): snapshots

---
 packages/react/src/components/search/search-input.test.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/search/search-input.test.tsx.snap b/packages/react/src/components/search/search-input.test.tsx.snap
index 7749bb047d..6cf0c07aa0 100644
--- a/packages/react/src/components/search/search-input.test.tsx.snap
+++ b/packages/react/src/components/search/search-input.test.tsx.snap
@@ -314,8 +314,8 @@ input:valid + .c8 {
             htmlFor="search-input"
           >
             <styled.label
+              $isMobile={false}
               htmlFor="search-input"
-              isMobile={false}
             >
               <label
                 className="c2 c3"

From 92de5dff6645d083a28b918f1fa63c7550187694 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 1 Aug 2024 14:02:32 -0400
Subject: [PATCH 11/23] chore(field-container): refactor

---
 .../components/field/field-container.test.tsx |  2 +-
 packages/react/src/components/input/input.tsx | 51 +++++++++++++++++--
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/field/field-container.test.tsx b/packages/react/src/components/field/field-container.test.tsx
index 4d6c77561e..fbc5571f09 100644
--- a/packages/react/src/components/field/field-container.test.tsx
+++ b/packages/react/src/components/field/field-container.test.tsx
@@ -285,7 +285,7 @@ describe('Field Container', () => {
                         label={label}
                         hint={hint}
                         id={providedId}
-                        valid
+                        valid={false}
                         validationErrorMessage=""
                     >
                         <Input />
diff --git a/packages/react/src/components/input/input.tsx b/packages/react/src/components/input/input.tsx
index a9f8ca1ed5..339053d0ea 100644
--- a/packages/react/src/components/input/input.tsx
+++ b/packages/react/src/components/input/input.tsx
@@ -3,11 +3,52 @@ import styled from 'styled-components';
 import { useId } from '../../hooks/use-id';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { useFieldControlContext } from '../field/context';
-import { inputsStyle } from '../text-input/styles/inputs';
+import { focus } from '../../utils/css-state';
 import { InputProps } from './types';
 
-const StyledInput = styled.input<{ isMobile: boolean; }>`
-    ${({ theme, isMobile }) => inputsStyle({ theme, isMobile })}
+const StyledInput = styled.input<{ $isMobile: boolean }>`
+    background: ${({ theme }) => theme.component['text-input-background-color']};
+    border: 1px solid;
+    border-radius: var(--border-radius);
+    box-sizing: border-box;
+    color: ${({ theme }) => theme.component['text-input-text-color']};
+    font-family: inherit;
+    font-size: ${({ $isMobile }) => ($isMobile ? '1rem' : '0.875rem')};
+    letter-spacing: ${({ $isMobile }) => ($isMobile ? '0.02875rem' : '0.015rem')};
+    line-height: 1.5rem;
+    margin: 0;
+    min-height: var(--size-2x);
+    outline: none;
+    padding: 0 var(--spacing-1x);
+    width: 100%;
+
+    &::placeholder {
+        color: ${({ theme }) => theme.component['text-input-placeholder-text-color']};
+    }
+
+    &:valid,
+    &[aria-invalid='false'] {
+        border-color: ${({ theme }) => theme.component['text-input-border-color']};
+    }
+
+    &:invalid,
+    &[aria-invalid='true'] {
+        border-color: ${({ theme }) => theme.component['text-input-error-border-color']};
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+        background-color: ${({ theme }) => theme.component['text-input-disabled-background-color']};
+        border-color: ${({ theme }) => theme.component['text-input-disabled-border-color']};
+        color: ${({ theme }) => theme.component['text-input-disabled-text-color']};
+
+        &,
+        &::placeholder {
+            color: ${({ theme }) => theme.component['text-input-placeholder-disabled-text-color']};
+        }
+    }
+
+    ${({ theme }) => focus({ theme })};
 `;
 
 export const Input = forwardRef(({
@@ -37,12 +78,12 @@ export const Input = forwardRef(({
             aria-describedby={ariaDescribedby}
             aria-disabled={disabled}
             aria-required={required}
-            aria-invalid={valid}
+            aria-invalid={valid ? 'false' : 'true'}
             data-testid="input"
             id={id}
             disabled={disabled}
             required={required}
-            isMobile={isMobile}
+            $isMobile={isMobile}
             ref={ref}
             {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
         />

From 336467b1666a2fc69d1c3f3d02e5508bf5401d89 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 1 Aug 2024 19:11:22 -0400
Subject: [PATCH 12/23] chore(field-container): post review changes

---
 .../field/feedbacks/invalid-field-message.tsx       |  9 +++------
 .../react/src/components/field/feedbacks/types.ts   |  8 ++++++--
 .../src/components/field/field-container.test.tsx   | 13 -------------
 .../components/field/field-container.test.tsx.snap  |  9 +++------
 .../react/src/components/field/field-container.tsx  | 11 ++---------
 packages/react/src/components/field/hint/hint.tsx   |  7 ++-----
 packages/react/src/components/field/hint/types.ts   |  8 ++++++--
 packages/react/src/components/input/input.tsx       |  1 -
 8 files changed, 22 insertions(+), 44 deletions(-)

diff --git a/packages/react/src/components/field/feedbacks/invalid-field-message.tsx b/packages/react/src/components/field/feedbacks/invalid-field-message.tsx
index 7583512b28..c7b1963d3d 100644
--- a/packages/react/src/components/field/feedbacks/invalid-field-message.tsx
+++ b/packages/react/src/components/field/feedbacks/invalid-field-message.tsx
@@ -4,7 +4,7 @@ import { useDeviceContext } from '../../device-context-provider/device-context-p
 import { Icon } from '../../icon/icon';
 import { InvalidFieldMessageProps } from './types';
 
-const StyledValidationMessage = styled.label<{ $isMobile: boolean }>`
+const StyledValidationMessage = styled.span<{ $isMobile: boolean }>`
     color: ${(props) => props.theme.component['field-error-text-color']};
     display: flex;
     font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
@@ -20,18 +20,15 @@ const StyledIcon = styled(Icon)`
 `;
 
 const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<InvalidFieldMessageProps>> = ({
-    children, id, noInvalidFieldIcon, htmlFor,
+    children, id, noInvalidFieldIcon,
 }) => {
     const { isMobile } = useDeviceContext();
 
     return (
         <StyledValidationMessage
-            data-testid="invalid-field"
-            aria-live="polite"
-            htmlFor={htmlFor}
+            data-testid="field-message"
             id={id}
             $isMobile={isMobile}
-            role="alert"
         >
             {!noInvalidFieldIcon && (
                 <StyledIcon name="alertOctagon" size={isMobile ? '24' : '16'} />
diff --git a/packages/react/src/components/field/feedbacks/types.ts b/packages/react/src/components/field/feedbacks/types.ts
index 00e86f2e30..587a50c346 100644
--- a/packages/react/src/components/field/feedbacks/types.ts
+++ b/packages/react/src/components/field/feedbacks/types.ts
@@ -1,6 +1,10 @@
-import { BaseLabelProps } from '../label/types';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { FieldContainerProps } from '../types';
 
+export type BaseSpanProps = Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
+    | 'id' | 'className'
+>;
+
 type CommonFieldContainerProps = Pick<FieldContainerProps, 'noInvalidFieldIcon'>;
 
-export interface InvalidFieldMessageProps extends BaseLabelProps, CommonFieldContainerProps {}
+export interface InvalidFieldMessageProps extends BaseSpanProps, CommonFieldContainerProps {}
diff --git a/packages/react/src/components/field/field-container.test.tsx b/packages/react/src/components/field/field-container.test.tsx
index fbc5571f09..3fa6627166 100644
--- a/packages/react/src/components/field/field-container.test.tsx
+++ b/packages/react/src/components/field/field-container.test.tsx
@@ -297,19 +297,6 @@ describe('Field Container', () => {
             });
         });
 
-        describe('aria-required', () => {
-            test('should be true when FieldContainer is required', () => {
-                const wrapper = renderWithProviders(
-                    <FieldContainer label={label} hint={hint} id={providedId} required validationErrorMessage="">
-                        <Input />
-                    </FieldContainer>,
-                );
-
-                const inputWrapper = wrapper.find('input');
-                expect(inputWrapper.prop('aria-required')).toBe('true');
-            });
-        });
-
         describe('aria-disabled', () => {
             test('should be true when FieldContainer is disabled', () => {
                 const wrapper = renderWithProviders(
diff --git a/packages/react/src/components/field/field-container.test.tsx.snap b/packages/react/src/components/field/field-container.test.tsx.snap
index 6bd918059a..29fc7a0c08 100644
--- a/packages/react/src/components/field/field-container.test.tsx.snap
+++ b/packages/react/src/components/field/field-container.test.tsx.snap
@@ -88,13 +88,10 @@ exports[`Field Container Styling matches invalid snapshot 1`] = `
 <div
   class="c0"
 >
-  <label
-    aria-live="polite"
+  <span
     class="c1"
-    data-testid="invalid-field"
-    for="id"
+    data-testid="field-message"
     id="id_invalid"
-    role="alert"
   >
     <svg
       class="c2"
@@ -104,7 +101,7 @@ exports[`Field Container Styling matches invalid snapshot 1`] = `
       width="16"
     />
     This text area input is invalid
-  </label>
+  </span>
   Children
 </div>
 `;
diff --git a/packages/react/src/components/field/field-container.tsx b/packages/react/src/components/field/field-container.tsx
index 2439636c73..140314c26a 100644
--- a/packages/react/src/components/field/field-container.tsx
+++ b/packages/react/src/components/field/field-container.tsx
@@ -86,19 +86,12 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
                     </Label>
                 )}
                 {hint && (
-                    <Hint
-                        id={slotIds.hint}
-                        htmlFor={fieldId}
-                    >
+                    <Hint id={slotIds.hint}>
                         {hint}
                     </Hint>
                 )}
                 {!valid && (
-                    <InvalidFieldMessage
-                        id={slotIds.invalid}
-                        htmlFor={fieldId}
-                        noInvalidFieldIcon={noInvalidFieldIcon}
-                    >
+                    <InvalidFieldMessage id={slotIds.invalid} noInvalidFieldIcon={noInvalidFieldIcon}>
                         {validationErrorMessage}
                     </InvalidFieldMessage>
                 )}
diff --git a/packages/react/src/components/field/hint/hint.tsx b/packages/react/src/components/field/hint/hint.tsx
index 7c5f946328..d5ec009b76 100644
--- a/packages/react/src/components/field/hint/hint.tsx
+++ b/packages/react/src/components/field/hint/hint.tsx
@@ -13,18 +13,15 @@ const StyledHint = styled.label<{ $isMobile: boolean }>`
 `;
 
 const Hint: VoidFunctionComponent<PropsWithChildren<HintProps>> = ({
-    children, id, htmlFor,
+    children, id,
 }) => {
     const { isMobile } = useDeviceContext();
 
     return (
         <StyledHint
-            data-testid="invalid-field"
-            aria-live="polite"
-            htmlFor={htmlFor}
+            data-testid="field-hint"
             id={id}
             $isMobile={isMobile}
-            role="alert"
         >
             {children}
         </StyledHint>
diff --git a/packages/react/src/components/field/hint/types.ts b/packages/react/src/components/field/hint/types.ts
index 01ffcf01ed..1c2d2f6621 100644
--- a/packages/react/src/components/field/hint/types.ts
+++ b/packages/react/src/components/field/hint/types.ts
@@ -1,3 +1,7 @@
-import { BaseLabelProps } from '../label/types';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
 
-export interface HintProps extends BaseLabelProps {}
+export type BaseSpanProps = Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
+    | 'id' | 'className'
+>;
+
+export interface HintProps extends BaseSpanProps {}
diff --git a/packages/react/src/components/input/input.tsx b/packages/react/src/components/input/input.tsx
index 339053d0ea..4fc5fbb4ec 100644
--- a/packages/react/src/components/input/input.tsx
+++ b/packages/react/src/components/input/input.tsx
@@ -77,7 +77,6 @@ export const Input = forwardRef(({
             aria-labelledby={ariaLabel ? undefined : ariaLabelledby}
             aria-describedby={ariaDescribedby}
             aria-disabled={disabled}
-            aria-required={required}
             aria-invalid={valid ? 'false' : 'true'}
             data-testid="input"
             id={id}

From a8ca4e4f836393d948f6f9b5c5b197c0e4684af9 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 1 Aug 2024 19:15:03 -0400
Subject: [PATCH 13/23] chore(field-container): snapshots

---
 .../combobox/combobox.test.tsx.snap           | 14 ++++----------
 .../date-picker/date-picker.test.tsx.snap     |  9 +++------
 .../dropdown-list/dropdown-list.test.tsx.snap | 19 +++++--------------
 .../feedbacks/invalid-field-message.test.tsx  |  5 +----
 .../invalid-field-message.test.tsx.snap       |  9 +++------
 .../numeric-input/numeric-input.test.tsx      |  4 ++--
 .../numeric-input/numeric-input.test.tsx.snap |  9 +++------
 .../password-input.test.tsx.snap              |  9 +++------
 .../stepper-input/stepper-input.test.tsx.snap |  9 +++------
 9 files changed, 27 insertions(+), 60 deletions(-)

diff --git a/packages/react/src/components/combobox/combobox.test.tsx.snap b/packages/react/src/components/combobox/combobox.test.tsx.snap
index 6fd7fcbbf6..e6b235f2c1 100644
--- a/packages/react/src/components/combobox/combobox.test.tsx.snap
+++ b/packages/react/src/components/combobox/combobox.test.tsx.snap
@@ -777,13 +777,10 @@ input + .c2 {
   >
     Select an option
   </label>
-  <label
-    aria-live="polite"
+  <span
     class="c4"
-    data-testid="invalid-field"
-    for="uuid1"
+    data-testid="field-message"
     id="uuid1_invalid"
-    role="alert"
   >
     <svg
       class="c5"
@@ -793,7 +790,7 @@ input + .c2 {
       width="16"
     />
     You must select an option
-  </label>
+  </span>
   <div
     class="c6"
   >
@@ -1735,12 +1732,9 @@ input + .c2 {
     Select an option
   </label>
   <label
-    aria-live="polite"
     class="c4"
-    data-testid="invalid-field"
-    for="uuid1"
+    data-testid="field-hint"
     id="uuid1_hint"
-    role="alert"
   >
     Hint
   </label>
diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
index 65c57be757..d2ce8ac454 100644
--- a/packages/react/src/components/date-picker/date-picker.test.tsx.snap
+++ b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -1954,13 +1954,10 @@ label + .c5 {
   >
     date
   </label>
-  <label
-    aria-live="polite"
+  <span
     class="c3"
-    data-testid="invalid-field"
-    for="uuid1"
+    data-testid="field-message"
     id="uuid1_invalid"
-    role="alert"
   >
     <svg
       class="c4"
@@ -1970,7 +1967,7 @@ label + .c5 {
       width="16"
     />
     Invalid date
-  </label>
+  </span>
   <div
     class="c5 c6"
   >
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
index 7245f33f6d..37e9dd34fd 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
+++ b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
@@ -671,12 +671,9 @@ input + .c2 {
     Select an option
   </label>
   <label
-    aria-live="polite"
     class="c4"
-    data-testid="invalid-field"
-    for="uuid1"
+    data-testid="field-hint"
     id="uuid1_hint"
-    role="alert"
   >
     Hint
   </label>
@@ -1147,13 +1144,10 @@ input + .c2 {
   >
     Select an option
   </label>
-  <label
-    aria-live="polite"
+  <span
     class="c4"
-    data-testid="invalid-field"
-    for="uuid1"
+    data-testid="field-message"
     id="uuid1_invalid"
-    role="alert"
   >
     <svg
       class="c5"
@@ -1163,7 +1157,7 @@ input + .c2 {
       width="16"
     />
     You must select an option
-  </label>
+  </span>
   <div
     aria-activedescendant="uuid1_ab"
     aria-controls="uuid1_listbox"
@@ -2573,12 +2567,9 @@ input + .c2 {
     Select an option
   </label>
   <label
-    aria-live="polite"
     class="c4"
-    data-testid="invalid-field"
-    for="uuid1"
+    data-testid="field-hint"
     id="uuid1_hint"
-    role="alert"
   >
     Hint
   </label>
diff --git a/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx b/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx
index 0253b76e8e..fd1db3a656 100644
--- a/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx
+++ b/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx
@@ -4,10 +4,7 @@ import { InvalidFieldMessage } from './invalid-field-message';
 describe('Invalid field', () => {
     test('Matches the snapshot', () => {
         const tree = renderWithTheme(
-            <InvalidFieldMessage
-                id="test-id"
-                htmlFor='input-id'
-            >
+            <InvalidFieldMessage id="test-id">
                 Feedback Message
             </InvalidFieldMessage>,
         );
diff --git a/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap b/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap
index 846c7b3479..928bbe4c73 100644
--- a/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap
+++ b/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap
@@ -27,13 +27,10 @@ exports[`Invalid field Matches the snapshot 1`] = `
   margin-right: var(--spacing-base);
 }
 
-<label
-  aria-live="polite"
+<span
   class="c0"
-  data-testid="invalid-field"
-  for="input-id"
+  data-testid="field-message"
   id="test-id"
-  role="alert"
 >
   <svg
     class="c1"
@@ -43,5 +40,5 @@ exports[`Invalid field Matches the snapshot 1`] = `
     width="16"
   />
   Feedback Message
-</label>
+</span>
 `;
diff --git a/packages/react/src/components/numeric-input/numeric-input.test.tsx b/packages/react/src/components/numeric-input/numeric-input.test.tsx
index f7499b8abb..566d54908f 100644
--- a/packages/react/src/components/numeric-input/numeric-input.test.tsx
+++ b/packages/react/src/components/numeric-input/numeric-input.test.tsx
@@ -82,12 +82,12 @@ describe('NumericInput', () => {
 
     test('should display error message on invalid value', () => {
         const wrapper = mountWithTheme(<NumericInput value="2" min={100} />);
-        expect(getByTestId(wrapper, 'invalid-field').exists()).toBe(true);
+        expect(getByTestId(wrapper, 'field-message').exists()).toBe(true);
     });
 
     test('should display error message on invalid defaultValue', () => {
         const wrapper = mountWithTheme(<NumericInput defaultValue="2" min={100} />);
-        expect(getByTestId(wrapper, 'invalid-field').exists()).toBe(true);
+        expect(getByTestId(wrapper, 'field-message').exists()).toBe(true);
     });
 
     test('should not have error message on required when value is empty', () => {
diff --git a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
index a4f5ebaf88..ed7f13c893 100644
--- a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
+++ b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
@@ -306,13 +306,10 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
 <div
   class="c0"
 >
-  <label
-    aria-live="polite"
+  <span
     class="c1"
-    data-testid="invalid-field"
-    for="uuid1"
+    data-testid="field-message"
     id="uuid1_invalid"
-    role="alert"
   >
     <svg
       class="c2"
@@ -322,7 +319,7 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
       width="16"
     />
     This is an error message
-  </label>
+  </span>
   <div
     class="c3"
   >
diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index eeaab89c54..6db8e06dfd 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -840,13 +840,10 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
 <div
   class="c0"
 >
-  <label
-    aria-live="polite"
+  <span
     class="c1"
-    data-testid="invalid-field"
-    for="uuid1"
+    data-testid="field-message"
     id="uuid1_invalid"
-    role="alert"
   >
     <svg
       class="c2"
@@ -856,7 +853,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
       width="16"
     />
     This is an error message
-  </label>
+  </span>
   <div
     class="c3"
   >
diff --git a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
index c8dd90d86f..9508b31a80 100644
--- a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
+++ b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
@@ -595,13 +595,10 @@ input + .c1 {
   >
     test
   </label>
-  <label
-    aria-live="polite"
+  <span
     class="c3"
-    data-testid="invalid-field"
-    for="uuid1"
+    data-testid="field-message"
     id="uuid1_invalid"
-    role="alert"
   >
     <svg
       class="c4"
@@ -611,7 +608,7 @@ input + .c1 {
       width="16"
     />
     Invalid number
-  </label>
+  </span>
   <div
     class="c5"
   >

From 96d3be6c883ad563609f6430ea910997018a71e5 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Thu, 1 Aug 2024 19:24:05 -0400
Subject: [PATCH 14/23] chore(field-container): post review changes

---
 .../react/src/components/combobox/combobox.test.tsx.snap  | 4 ++--
 .../components/dropdown-list/dropdown-list.test.tsx.snap  | 8 ++++----
 packages/react/src/components/field/hint/hint.tsx         | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/combobox/combobox.test.tsx.snap b/packages/react/src/components/combobox/combobox.test.tsx.snap
index e6b235f2c1..299118f652 100644
--- a/packages/react/src/components/combobox/combobox.test.tsx.snap
+++ b/packages/react/src/components/combobox/combobox.test.tsx.snap
@@ -1731,13 +1731,13 @@ input + .c2 {
   >
     Select an option
   </label>
-  <label
+  <span
     class="c4"
     data-testid="field-hint"
     id="uuid1_hint"
   >
     Hint
-  </label>
+  </span>
   <div
     class="c5"
   >
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
index 37e9dd34fd..07bd9f1530 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
+++ b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
@@ -670,13 +670,13 @@ input + .c2 {
   >
     Select an option
   </label>
-  <label
+  <span
     class="c4"
     data-testid="field-hint"
     id="uuid1_hint"
   >
     Hint
-  </label>
+  </span>
   <div
     aria-activedescendant="uuid1_ab"
     aria-controls="uuid1_listbox"
@@ -2566,13 +2566,13 @@ input + .c2 {
   >
     Select an option
   </label>
-  <label
+  <span
     class="c4"
     data-testid="field-hint"
     id="uuid1_hint"
   >
     Hint
-  </label>
+  </span>
   <div
     aria-activedescendant="uuid1_ab"
     aria-controls="uuid1_listbox"
diff --git a/packages/react/src/components/field/hint/hint.tsx b/packages/react/src/components/field/hint/hint.tsx
index d5ec009b76..5c5c0a5b74 100644
--- a/packages/react/src/components/field/hint/hint.tsx
+++ b/packages/react/src/components/field/hint/hint.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useDeviceContext } from '../../device-context-provider/device-context-provider';
 import { HintProps } from './types';
 
-const StyledHint = styled.label<{ $isMobile: boolean }>`
+const StyledHint = styled.span<{ $isMobile: boolean }>`
     color: ${(props) => props.theme.component['field-hint-text-color']};
     display: block;
     font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};

From 68f13962064b523c2a41e5a69e2a309a89303e34 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Mon, 2 Dec 2024 16:51:12 -0500
Subject: [PATCH 15/23] chore(form-field): post master merge

---
 .../combobox/combobox.test.tsx.snap           |  18 +-
 .../src/components/combobox/combobox.tsx      |   2 +-
 .../date-picker/date-picker.test.tsx.snap     |  76 ++---
 .../components/date-picker/date-picker.tsx    |   2 +-
 .../dropdown-list/dropdown-list.test.tsx.snap |  24 +-
 .../dropdown-list/dropdown-list.tsx           |   2 +-
 .../feedbacks/invalid-field-message.test.tsx  |   2 +-
 .../invalid-field-message.test.tsx.snap       |   2 +-
 .../feedbacks/invalid-field-message.tsx       |   6 +-
 .../components/{field => }/feedbacks/types.ts |   2 +-
 .../field/field-container.test.tsx.snap       |   2 +-
 .../src/components/field/field-container.tsx  |   6 +-
 packages/react/src/components/field/types.ts  |   1 +
 .../src/components/{field => }/hint/hint.tsx  |   2 +-
 .../src/components/{field => }/hint/types.ts  |   0
 .../{field => }/label/label.test.tsx          |   4 +-
 .../{field => }/label/label.test.tsx.snap     |   0
 .../components/{field => }/label/label.tsx    |   6 +-
 .../src/components/{field => }/label/types.ts |   2 +-
 .../numeric-input/numeric-input.test.tsx      |   4 +-
 .../numeric-input/numeric-input.test.tsx.snap | 297 +++++++++++-------
 .../password-creation-input.tsx               |   2 +-
 .../password-input.test.tsx.snap              |   2 +-
 .../password-input/password-input.tsx         |   2 +-
 .../components/slider/slider.test.tsx.snap    |  12 +-
 .../react/src/components/slider/slider.tsx    |   2 +-
 .../stepper-input/stepper-input.test.tsx.snap |   2 +-
 .../src/components/text-area/text-area.tsx    |   2 +-
 28 files changed, 285 insertions(+), 199 deletions(-)
 rename packages/react/src/components/{field => }/feedbacks/invalid-field-message.test.tsx (84%)
 rename packages/react/src/components/{field => }/feedbacks/invalid-field-message.test.tsx.snap (96%)
 rename packages/react/src/components/{field => }/feedbacks/invalid-field-message.tsx (87%)
 rename packages/react/src/components/{field => }/feedbacks/types.ts (87%)
 rename packages/react/src/components/{field => }/hint/hint.tsx (90%)
 rename packages/react/src/components/{field => }/hint/types.ts (100%)
 rename packages/react/src/components/{field => }/label/label.test.tsx (80%)
 rename packages/react/src/components/{field => }/label/label.test.tsx.snap (100%)
 rename packages/react/src/components/{field => }/label/label.tsx (90%)
 rename packages/react/src/components/{field => }/label/types.ts (90%)

diff --git a/packages/react/src/components/combobox/combobox.test.tsx.snap b/packages/react/src/components/combobox/combobox.test.tsx.snap
index 5a226144af..b7008d2b5e 100644
--- a/packages/react/src/components/combobox/combobox.test.tsx.snap
+++ b/packages/react/src/components/combobox/combobox.test.tsx.snap
@@ -266,8 +266,8 @@ input + .c2 {
 >
   <label
     class="c2 c3"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Select an option
   </label>
@@ -770,15 +770,15 @@ input + .c2 {
 >
   <label
     class="c2 c3"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Select an option
   </label>
   <span
     class="c4"
-    data-testid="field-message"
-    id="uuid1_invalid"
+    data-testid="invalid-field"
+    id="uuid2_invalid"
   >
     <svg
       class="c5"
@@ -1722,15 +1722,15 @@ input + .c2 {
 >
   <label
     class="c2 c3"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Select an option
   </label>
   <span
     class="c4"
     data-testid="field-hint"
-    id="uuid1_hint"
+    id="uuid2_hint"
   >
     Hint
   </span>
diff --git a/packages/react/src/components/combobox/combobox.tsx b/packages/react/src/components/combobox/combobox.tsx
index 42323fbe10..4af0fa302a 100644
--- a/packages/react/src/components/combobox/combobox.tsx
+++ b/packages/react/src/components/combobox/combobox.tsx
@@ -596,7 +596,7 @@ export const Combobox: VoidFunctionComponent<ComboboxProps> = ({
         <StyledFieldContainer
             className={className}
             noMargin={noMargin}
-            id={id}
+            fieldId={id}
             label={label}
             required={required}
             tooltip={tooltip}
diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
index 8e80de6f5d..5ce12fea63 100644
--- a/packages/react/src/components/date-picker/date-picker.test.tsx.snap
+++ b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -350,8 +350,8 @@ label + .c3 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     date
   </label>
@@ -740,8 +740,8 @@ label + .c3 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     date
   </label>
@@ -1132,8 +1132,8 @@ label + .c3 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     date
   </label>
@@ -1524,8 +1524,8 @@ label + .c3 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     date
   </label>
@@ -1944,15 +1944,15 @@ label + .c5 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     date
   </label>
   <span
     class="c3"
-    data-testid="field-message"
-    id="uuid1_invalid"
+    data-testid="invalid-field"
+    id="uuid2_invalid"
   >
     <svg
       class="c4"
@@ -2350,8 +2350,8 @@ label + .c3 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     date
   </label>
@@ -2908,8 +2908,8 @@ label + .c3 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     date
   </label>
@@ -2994,15 +2994,15 @@ label + .c3 {
                         class="c12 c13"
                       >
                         <div
-                          aria-controls="uuid2_listbox"
+                          aria-controls="uuid3_listbox"
                           aria-expanded="false"
                           aria-invalid="false"
                           aria-label="Select a month"
-                          aria-labelledby="uuid2_label uuid2_listbox_october_label"
+                          aria-labelledby="uuid3_label uuid3_listbox_october_label"
                           aria-required="false"
                           class="c14"
                           data-testid="month-select"
-                          id="uuid2"
+                          id="uuid3"
                           role="combobox"
                           tabindex="0"
                           value="october"
@@ -3036,15 +3036,15 @@ label + .c3 {
                         class="c12 c13"
                       >
                         <div
-                          aria-controls="uuid3_listbox"
+                          aria-controls="uuid5_listbox"
                           aria-expanded="false"
                           aria-invalid="false"
                           aria-label="Select a year"
-                          aria-labelledby="uuid3_label uuid3_listbox_2010_label"
+                          aria-labelledby="uuid5_label uuid5_listbox_2010_label"
                           aria-required="false"
                           class="c14"
                           data-testid="year-select"
-                          id="uuid3"
+                          id="uuid5"
                           role="combobox"
                           tabindex="0"
                           value="2010"
@@ -4209,8 +4209,8 @@ label + .c3 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     date
   </label>
@@ -4295,15 +4295,15 @@ label + .c3 {
                         class="c12 c13"
                       >
                         <div
-                          aria-controls="uuid2_listbox"
+                          aria-controls="uuid3_listbox"
                           aria-expanded="false"
                           aria-invalid="false"
                           aria-label="Select a month"
-                          aria-labelledby="uuid2_label uuid2_listbox_october_label"
+                          aria-labelledby="uuid3_label uuid3_listbox_october_label"
                           aria-required="false"
                           class="c14"
                           data-testid="month-select"
-                          id="uuid2"
+                          id="uuid3"
                           role="combobox"
                           tabindex="0"
                           value="october"
@@ -4337,15 +4337,15 @@ label + .c3 {
                         class="c12 c13"
                       >
                         <div
-                          aria-controls="uuid3_listbox"
+                          aria-controls="uuid5_listbox"
                           aria-expanded="false"
                           aria-invalid="false"
                           aria-label="Select a year"
-                          aria-labelledby="uuid3_label uuid3_listbox_2010_label"
+                          aria-labelledby="uuid5_label uuid5_listbox_2010_label"
                           aria-required="false"
                           class="c14"
                           data-testid="year-select"
-                          id="uuid3"
+                          id="uuid5"
                           role="combobox"
                           tabindex="0"
                           value="2010"
@@ -5485,8 +5485,8 @@ label + .c3 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     date
   </label>
@@ -5567,15 +5567,15 @@ label + .c3 {
                           class="c12 c13"
                         >
                           <div
-                            aria-controls="uuid2_listbox"
+                            aria-controls="uuid3_listbox"
                             aria-expanded="false"
                             aria-invalid="false"
                             aria-label="Select a month"
-                            aria-labelledby="uuid2_label uuid2_listbox_october_label"
+                            aria-labelledby="uuid3_label uuid3_listbox_october_label"
                             aria-required="false"
                             class="c14"
                             data-testid="month-select"
-                            id="uuid2"
+                            id="uuid3"
                             role="combobox"
                             tabindex="0"
                             value="october"
@@ -5609,15 +5609,15 @@ label + .c3 {
                           class="c12 c13"
                         >
                           <div
-                            aria-controls="uuid3_listbox"
+                            aria-controls="uuid5_listbox"
                             aria-expanded="false"
                             aria-invalid="false"
                             aria-label="Select a year"
-                            aria-labelledby="uuid3_label uuid3_listbox_2010_label"
+                            aria-labelledby="uuid5_label uuid5_listbox_2010_label"
                             aria-required="false"
                             class="c14"
                             data-testid="year-select"
-                            id="uuid3"
+                            id="uuid5"
                             role="combobox"
                             tabindex="0"
                             value="2010"
diff --git a/packages/react/src/components/date-picker/date-picker.tsx b/packages/react/src/components/date-picker/date-picker.tsx
index 7dba75016e..8e43efd768 100644
--- a/packages/react/src/components/date-picker/date-picker.tsx
+++ b/packages/react/src/components/date-picker/date-picker.tsx
@@ -512,7 +512,7 @@ export const Datepicker = forwardRef(({
             <FieldContainer
                 className={className}
                 noMargin={noMargin}
-                id={fieldId}
+                fieldId={fieldId}
                 label={label}
                 required={required}
                 tooltip={tooltip}
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
index 07bd9f1530..5b5e85e4a4 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
+++ b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
@@ -217,8 +217,8 @@ input + .c2 {
 >
   <label
     class="c2 c3"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Select an option
   </label>
@@ -665,15 +665,15 @@ input + .c2 {
 >
   <label
     class="c2 c3"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Select an option
   </label>
   <span
     class="c4"
     data-testid="field-hint"
-    id="uuid1_hint"
+    id="uuid2_hint"
   >
     Hint
   </span>
@@ -1139,15 +1139,15 @@ input + .c2 {
 >
   <label
     class="c2 c3"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Select an option
   </label>
   <span
     class="c4"
-    data-testid="field-message"
-    id="uuid1_invalid"
+    data-testid="invalid-field"
+    id="uuid2_invalid"
   >
     <svg
       class="c5"
@@ -2561,15 +2561,15 @@ input + .c2 {
 >
   <label
     class="c2 c3"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Select an option
   </label>
   <span
     class="c4"
     data-testid="field-hint"
-    id="uuid1_hint"
+    id="uuid2_hint"
   >
     Hint
   </span>
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.tsx b/packages/react/src/components/dropdown-list/dropdown-list.tsx
index ad9a405fe7..55e998b2b4 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.tsx
+++ b/packages/react/src/components/dropdown-list/dropdown-list.tsx
@@ -475,7 +475,7 @@ export const DropdownList: VoidFunctionComponent<DropdownListProps<boolean | und
         <StyledFieldContainer
             className={className}
             noMargin={noMargin}
-            id={id}
+            fieldId={id}
             label={label}
             required={required}
             tooltip={tooltip}
diff --git a/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx b/packages/react/src/components/feedbacks/invalid-field-message.test.tsx
similarity index 84%
rename from packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx
rename to packages/react/src/components/feedbacks/invalid-field-message.test.tsx
index fd1db3a656..a8a22287f0 100644
--- a/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx
+++ b/packages/react/src/components/feedbacks/invalid-field-message.test.tsx
@@ -1,4 +1,4 @@
-import { renderWithTheme } from '../../../test-utils/renderer';
+import { renderWithTheme } from '../../test-utils/renderer';
 import { InvalidFieldMessage } from './invalid-field-message';
 
 describe('Invalid field', () => {
diff --git a/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap b/packages/react/src/components/feedbacks/invalid-field-message.test.tsx.snap
similarity index 96%
rename from packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap
rename to packages/react/src/components/feedbacks/invalid-field-message.test.tsx.snap
index 928bbe4c73..aa125747a0 100644
--- a/packages/react/src/components/field/feedbacks/invalid-field-message.test.tsx.snap
+++ b/packages/react/src/components/feedbacks/invalid-field-message.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`Invalid field Matches the snapshot 1`] = `
 
 <span
   class="c0"
-  data-testid="field-message"
+  data-testid="invalid-field"
   id="test-id"
 >
   <svg
diff --git a/packages/react/src/components/field/feedbacks/invalid-field-message.tsx b/packages/react/src/components/feedbacks/invalid-field-message.tsx
similarity index 87%
rename from packages/react/src/components/field/feedbacks/invalid-field-message.tsx
rename to packages/react/src/components/feedbacks/invalid-field-message.tsx
index c7b1963d3d..7afe6fb295 100644
--- a/packages/react/src/components/field/feedbacks/invalid-field-message.tsx
+++ b/packages/react/src/components/feedbacks/invalid-field-message.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
-import { useDeviceContext } from '../../device-context-provider/device-context-provider';
-import { Icon } from '../../icon/icon';
+import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { Icon } from '../icon/icon';
 import { InvalidFieldMessageProps } from './types';
 
 const StyledValidationMessage = styled.span<{ $isMobile: boolean }>`
@@ -26,7 +26,7 @@ const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<InvalidFieldM
 
     return (
         <StyledValidationMessage
-            data-testid="field-message"
+            data-testid="invalid-field"
             id={id}
             $isMobile={isMobile}
         >
diff --git a/packages/react/src/components/field/feedbacks/types.ts b/packages/react/src/components/feedbacks/types.ts
similarity index 87%
rename from packages/react/src/components/field/feedbacks/types.ts
rename to packages/react/src/components/feedbacks/types.ts
index 587a50c346..85710e0338 100644
--- a/packages/react/src/components/field/feedbacks/types.ts
+++ b/packages/react/src/components/feedbacks/types.ts
@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
-import { FieldContainerProps } from '../types';
+import { FieldContainerProps } from '../field/types';
 
 export type BaseSpanProps = Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
     | 'id' | 'className'
diff --git a/packages/react/src/components/field/field-container.test.tsx.snap b/packages/react/src/components/field/field-container.test.tsx.snap
index 29fc7a0c08..8ee811e7dc 100644
--- a/packages/react/src/components/field/field-container.test.tsx.snap
+++ b/packages/react/src/components/field/field-container.test.tsx.snap
@@ -90,7 +90,7 @@ exports[`Field Container Styling matches invalid snapshot 1`] = `
 >
   <span
     class="c1"
-    data-testid="field-message"
+    data-testid="invalid-field"
     id="id_invalid"
   >
     <svg
diff --git a/packages/react/src/components/field/field-container.tsx b/packages/react/src/components/field/field-container.tsx
index 140314c26a..ded9411cb2 100644
--- a/packages/react/src/components/field/field-container.tsx
+++ b/packages/react/src/components/field/field-container.tsx
@@ -2,9 +2,9 @@ import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
 import styled from 'styled-components';
 import { useId } from '../../hooks/use-id';
 import { FieldControlContext } from './context';
-import { InvalidFieldMessage } from './feedbacks/invalid-field-message';
-import { Label } from './label/label';
-import { Hint } from './hint/hint';
+import { InvalidFieldMessage } from '../feedbacks/invalid-field-message';
+import { Label } from '../label/label';
+import { Hint } from '../hint/hint';
 import { FieldContainerProps } from './types';
 import { getAriaDescribedby, getAriaLabel, getAriaLabelledby, getSlotIds } from './utils';
 
diff --git a/packages/react/src/components/field/types.ts b/packages/react/src/components/field/types.ts
index 732d380db8..00d085807c 100644
--- a/packages/react/src/components/field/types.ts
+++ b/packages/react/src/components/field/types.ts
@@ -11,6 +11,7 @@ export interface FieldControlProps {
 }
 
 export interface FieldContainerProps extends FieldControlProps {
+    fieldId?: string;
     className?: string;
     noMargin?: boolean;
     label?: string;
diff --git a/packages/react/src/components/field/hint/hint.tsx b/packages/react/src/components/hint/hint.tsx
similarity index 90%
rename from packages/react/src/components/field/hint/hint.tsx
rename to packages/react/src/components/hint/hint.tsx
index 5c5c0a5b74..77f07acddd 100644
--- a/packages/react/src/components/field/hint/hint.tsx
+++ b/packages/react/src/components/hint/hint.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
-import { useDeviceContext } from '../../device-context-provider/device-context-provider';
+import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { HintProps } from './types';
 
 const StyledHint = styled.span<{ $isMobile: boolean }>`
diff --git a/packages/react/src/components/field/hint/types.ts b/packages/react/src/components/hint/types.ts
similarity index 100%
rename from packages/react/src/components/field/hint/types.ts
rename to packages/react/src/components/hint/types.ts
diff --git a/packages/react/src/components/field/label/label.test.tsx b/packages/react/src/components/label/label.test.tsx
similarity index 80%
rename from packages/react/src/components/field/label/label.test.tsx
rename to packages/react/src/components/label/label.test.tsx
index e7fbbac7d8..8eeaa77991 100644
--- a/packages/react/src/components/field/label/label.test.tsx
+++ b/packages/react/src/components/label/label.test.tsx
@@ -1,5 +1,5 @@
-import { mountWithTheme, renderWithTheme } from '../../../test-utils/renderer';
-import { Tooltip } from '../../tooltip/tooltip';
+import { mountWithTheme, renderWithTheme } from '../../test-utils/renderer';
+import { Tooltip } from '../tooltip/tooltip';
 import { Label } from './label';
 
 describe('Label', () => {
diff --git a/packages/react/src/components/field/label/label.test.tsx.snap b/packages/react/src/components/label/label.test.tsx.snap
similarity index 100%
rename from packages/react/src/components/field/label/label.test.tsx.snap
rename to packages/react/src/components/label/label.test.tsx.snap
diff --git a/packages/react/src/components/field/label/label.tsx b/packages/react/src/components/label/label.tsx
similarity index 90%
rename from packages/react/src/components/field/label/label.tsx
rename to packages/react/src/components/label/label.tsx
index 7a1a033921..f86294e13d 100644
--- a/packages/react/src/components/field/label/label.tsx
+++ b/packages/react/src/components/label/label.tsx
@@ -1,8 +1,8 @@
 import { Fragment, FunctionComponent, PropsWithChildren } from 'react';
 import styled from 'styled-components';
-import { useDeviceContext } from '../../device-context-provider/device-context-provider';
-import { Tooltip } from '../../tooltip/tooltip';
-import { useTranslation } from '../../../i18n/use-translation';
+import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { Tooltip } from '../tooltip/tooltip';
+import { useTranslation } from '../../i18n/use-translation';
 import { LabelProps, RequiredLabelProps } from './types';
 
 const StyledWrapper = styled.div`
diff --git a/packages/react/src/components/field/label/types.ts b/packages/react/src/components/label/types.ts
similarity index 90%
rename from packages/react/src/components/field/label/types.ts
rename to packages/react/src/components/label/types.ts
index fb90d6fffe..e40b5d48f4 100644
--- a/packages/react/src/components/field/label/types.ts
+++ b/packages/react/src/components/label/types.ts
@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, LabelHTMLAttributes } from 'react';
-import { FieldContainerProps } from '../types';
+import { FieldContainerProps } from '../field/types';
 
 export type BaseLabelProps = Pick<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>,
     | 'id' | 'className' | 'htmlFor'
diff --git a/packages/react/src/components/numeric-input/numeric-input.test.tsx b/packages/react/src/components/numeric-input/numeric-input.test.tsx
index 566d54908f..f7499b8abb 100644
--- a/packages/react/src/components/numeric-input/numeric-input.test.tsx
+++ b/packages/react/src/components/numeric-input/numeric-input.test.tsx
@@ -82,12 +82,12 @@ describe('NumericInput', () => {
 
     test('should display error message on invalid value', () => {
         const wrapper = mountWithTheme(<NumericInput value="2" min={100} />);
-        expect(getByTestId(wrapper, 'field-message').exists()).toBe(true);
+        expect(getByTestId(wrapper, 'invalid-field').exists()).toBe(true);
     });
 
     test('should display error message on invalid defaultValue', () => {
         const wrapper = mountWithTheme(<NumericInput defaultValue="2" min={100} />);
-        expect(getByTestId(wrapper, 'field-message').exists()).toBe(true);
+        expect(getByTestId(wrapper, 'invalid-field').exists()).toBe(true);
     });
 
     test('should not have error message on required when value is empty', () => {
diff --git a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
index ed7f13c893..4647994106 100644
--- a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
+++ b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`NumericInput matches the snapshot (Disabled) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
-.c4 {
+.c6 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -38,69 +38,80 @@ exports[`NumericInput matches the snapshot (Disabled) 1`] = `
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: left;
 }
 
-.c4::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c4::-moz-placeholder {
+.c6::-moz-placeholder {
   color: #60666E;
 }
 
-.c4:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c4::placeholder {
+.c6::placeholder {
   color: #60666E;
 }
 
-.c4:disabled {
+.c6:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c4:disabled,
-.c4:disabled::-webkit-input-placeholder {
+.c6:disabled,
+.c6:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c4:disabled,
-.c4:disabled::-moz-placeholder {
+.c6:disabled,
+.c6:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c4:disabled,
-.c4:disabled:-ms-input-placeholder {
+.c6:disabled,
+.c6:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c4:disabled,
-.c4:disabled::placeholder {
+.c6:disabled,
+.c6:disabled::placeholder {
   color: #B7BBC2;
 }
 
-.c4:focus,
-.c4:disabled {
+.c6:focus,
+.c6:disabled {
   border: 0;
   box-shadow: none;
 }
 
-.c3 {
+.c4 {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
+  color: #60666E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c4 > svg {
+  height: 16px;
+  width: 16px;
+}
+
+.c5 {
   padding-left: var(--spacing-1x);
 }
 
-.c1 {
+.c2 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -114,34 +125,44 @@ exports[`NumericInput matches the snapshot (Disabled) 1`] = `
   border-color: #B7BBC2;
 }
 
-.c1 {
+.c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c1:focus-within {
+.c2:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c1 .c2 {
+.c2 .c3 {
   color: #B7BBC2;
 }
 
+.c1 .eds-TextInput-control {
+  text-align: left;
+}
+
+.c1 .eds-TextInput-leftAdornment,
+.c1 .eds-TextInput-rightAdornment {
+  color: #1B1C1E;
+}
+
 <div
-  class="c0"
+  class="c0 c1"
+  data-testid="field-container"
 >
   <div
-    class="c1"
+    class="c2 eds-TextInput-control"
   >
     <span
-      class="c2 c3"
+      class="c3 c4 c5 eds-TextInput-leftAdornment"
     >
       %
     </span>
     <input
-      class="c4"
+      class="c6"
       data-testid="numeric-input"
       disabled=""
       id="uuid1"
@@ -154,7 +175,7 @@ exports[`NumericInput matches the snapshot (Disabled) 1`] = `
 `;
 
 exports[`NumericInput matches the snapshot (Invalid) 1`] = `
-.c1 {
+.c2 {
   color: #CD2C23;
   display: -webkit-box;
   display: -webkit-flex;
@@ -169,7 +190,7 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
   line-height: 1.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -194,7 +215,7 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
-.c5 {
+.c7 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -217,69 +238,80 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: left;
 }
 
-.c5::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c5::-moz-placeholder {
+.c7::-moz-placeholder {
   color: #60666E;
 }
 
-.c5:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c5::placeholder {
+.c7::placeholder {
   color: #60666E;
 }
 
-.c5:disabled {
+.c7:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled::-webkit-input-placeholder {
+.c7:disabled,
+.c7:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled::-moz-placeholder {
+.c7:disabled,
+.c7:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled:-ms-input-placeholder {
+.c7:disabled,
+.c7:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled::placeholder {
+.c7:disabled,
+.c7:disabled::placeholder {
   color: #B7BBC2;
 }
 
-.c5:focus,
-.c5:disabled {
+.c7:focus,
+.c7:disabled {
   border: 0;
   box-shadow: none;
 }
 
-.c4 {
+.c5 {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
+  color: #60666E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c5 > svg {
+  height: 16px;
+  width: 16px;
+}
+
+.c6 {
   padding-left: var(--spacing-1x);
 }
 
-.c3 {
+.c4 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -292,27 +324,37 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
   border-color: #CD2C23;
 }
 
-.c3 {
+.c4 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c3:focus-within {
+.c4:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
+.c1 .eds-TextInput-control {
+  text-align: left;
+}
+
+.c1 .eds-TextInput-leftAdornment,
+.c1 .eds-TextInput-rightAdornment {
+  color: #1B1C1E;
+}
+
 <div
-  class="c0"
+  class="c0 c1"
+  data-testid="field-container"
 >
   <span
-    class="c1"
-    data-testid="field-message"
+    class="c2"
+    data-testid="invalid-field"
     id="uuid1_invalid"
   >
     <svg
-      class="c2"
+      class="c3"
       color="currentColor"
       focusable="false"
       height="16"
@@ -321,15 +363,16 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
     This is an error message
   </span>
   <div
-    class="c3"
+    class="c4 eds-TextInput-control"
   >
     <span
-      class="c4"
+      class="c5 c6 eds-TextInput-leftAdornment"
     >
       %
     </span>
     <input
-      class="c5"
+      aria-describedby="uuid1_invalid"
+      class="c7"
       data-testid="numeric-input"
       id="uuid1"
       inputmode="numeric"
@@ -355,7 +398,7 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at end) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
-.c2 {
+.c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -378,69 +421,80 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at end) 1`] = `
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: left;
 }
 
-.c2::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c2::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #60666E;
 }
 
-.c2:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c2::placeholder {
+.c3::placeholder {
   color: #60666E;
 }
 
-.c2:disabled {
+.c3:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-webkit-input-placeholder {
+.c3:disabled,
+.c3:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-moz-placeholder {
+.c3:disabled,
+.c3:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled:-ms-input-placeholder {
+.c3:disabled,
+.c3:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::placeholder {
+.c3:disabled,
+.c3:disabled::placeholder {
   color: #B7BBC2;
 }
 
-.c2:focus,
-.c2:disabled {
+.c3:focus,
+.c3:disabled {
   border: 0;
   box-shadow: none;
 }
 
-.c3 {
+.c4 {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
+  color: #60666E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c4 > svg {
+  height: 16px;
+  width: 16px;
+}
+
+.c5 {
   padding-right: var(--spacing-1x);
 }
 
-.c1 {
+.c2 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -452,25 +506,35 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at end) 1`] = `
   height: var(--size-2x);
 }
 
-.c1 {
+.c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c1:focus-within {
+.c2:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
+.c1 .eds-TextInput-control {
+  text-align: left;
+}
+
+.c1 .eds-TextInput-leftAdornment,
+.c1 .eds-TextInput-rightAdornment {
+  color: #1B1C1E;
+}
+
 <div
-  class="c0"
+  class="c0 c1"
+  data-testid="field-container"
 >
   <div
-    class="c1"
+    class="c2 eds-TextInput-control"
   >
     <input
-      class="c2"
+      class="c3"
       data-testid="numeric-input"
       id="uuid1"
       inputmode="numeric"
@@ -478,7 +542,7 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at end) 1`] = `
       value="50"
     />
     <span
-      class="c3"
+      class="c4 c5 eds-TextInput-rightAdornment"
     >
       %
     </span>
@@ -501,7 +565,7 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at start) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
-.c3 {
+.c5 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -524,69 +588,80 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at start) 1`] = `
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: left;
 }
 
-.c3::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c3::-moz-placeholder {
+.c5::-moz-placeholder {
   color: #60666E;
 }
 
-.c3:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c3::placeholder {
+.c5::placeholder {
   color: #60666E;
 }
 
-.c3:disabled {
+.c5:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-webkit-input-placeholder {
+.c5:disabled,
+.c5:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-moz-placeholder {
+.c5:disabled,
+.c5:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled:-ms-input-placeholder {
+.c5:disabled,
+.c5:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::placeholder {
+.c5:disabled,
+.c5:disabled::placeholder {
   color: #B7BBC2;
 }
 
-.c3:focus,
-.c3:disabled {
+.c5:focus,
+.c5:disabled {
   border: 0;
   box-shadow: none;
 }
 
-.c2 {
+.c3 {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
+  color: #60666E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c3 > svg {
+  height: 16px;
+  width: 16px;
+}
+
+.c4 {
   padding-left: var(--spacing-1x);
 }
 
-.c1 {
+.c2 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -598,30 +673,40 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at start) 1`] = `
   height: var(--size-2x);
 }
 
-.c1 {
+.c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c1:focus-within {
+.c2:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
+.c1 .eds-TextInput-control {
+  text-align: left;
+}
+
+.c1 .eds-TextInput-leftAdornment,
+.c1 .eds-TextInput-rightAdornment {
+  color: #1B1C1E;
+}
+
 <div
-  class="c0"
+  class="c0 c1"
+  data-testid="field-container"
 >
   <div
-    class="c1"
+    class="c2 eds-TextInput-control"
   >
     <span
-      class="c2"
+      class="c3 c4 eds-TextInput-leftAdornment"
     >
       %
     </span>
     <input
-      class="c3"
+      class="c5"
       data-testid="numeric-input"
       id="uuid1"
       inputmode="numeric"
diff --git a/packages/react/src/components/password-creation-input/password-creation-input.tsx b/packages/react/src/components/password-creation-input/password-creation-input.tsx
index bcb83171d9..8374b35ded 100644
--- a/packages/react/src/components/password-creation-input/password-creation-input.tsx
+++ b/packages/react/src/components/password-creation-input/password-creation-input.tsx
@@ -2,8 +2,8 @@ import { ChangeEvent, useState, VoidFunctionComponent, useMemo } from 'react';
 import styled from 'styled-components';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { IconButton } from '../buttons/icon-button';
-import { FieldContainer } from '../field-container/field-container';
 import { useTranslation } from '../../i18n/use-translation';
+import { FieldContainer } from '../field/field-container';
 import { Tooltip } from '../tooltip/tooltip';
 import { getPasswordStrength } from './password-strength';
 import { PasswordRule } from './password-rule';
diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index aa78d38771..9c3998aeb9 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -812,7 +812,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
 >
   <span
     class="c1"
-    data-testid="field-message"
+    data-testid="invalid-field"
     id="uuid1_invalid"
   >
     <svg
diff --git a/packages/react/src/components/password-input/password-input.tsx b/packages/react/src/components/password-input/password-input.tsx
index ca4e9eb94a..8673745c7d 100644
--- a/packages/react/src/components/password-input/password-input.tsx
+++ b/packages/react/src/components/password-input/password-input.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { v4 as uuid } from '../../utils/uuid';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../field/field-container';
 import { Tooltip } from '../tooltip/tooltip';
 import { inputsStyle } from '../text-input/styles/inputs';
 
diff --git a/packages/react/src/components/slider/slider.test.tsx.snap b/packages/react/src/components/slider/slider.test.tsx.snap
index bac906d939..54d2ee1077 100644
--- a/packages/react/src/components/slider/slider.test.tsx.snap
+++ b/packages/react/src/components/slider/slider.test.tsx.snap
@@ -236,8 +236,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Label
   </label>
@@ -556,8 +556,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Label
   </label>
@@ -851,8 +851,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Label
   </label>
diff --git a/packages/react/src/components/slider/slider.tsx b/packages/react/src/components/slider/slider.tsx
index b214455e22..59504cfea1 100644
--- a/packages/react/src/components/slider/slider.tsx
+++ b/packages/react/src/components/slider/slider.tsx
@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import { useTranslation } from '../../i18n/use-translation';
+import { FieldContainer } from '../field/field-container';
 import { TooltipProps } from '../tooltip/tooltip';
 import { useId } from '../../hooks/use-id';
-import { FieldContainer } from '../field-container/field-container';
 import { ValueTooltip } from './value-tooltip';
 import { Labels, SliderContainer, StyledSlider } from './styles';
 
diff --git a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
index 83d25355fc..f6df745b20 100644
--- a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
+++ b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
@@ -598,7 +598,7 @@ input + .c1 {
   </label>
   <span
     class="c3"
-    data-testid="field-message"
+    data-testid="invalid-field"
     id="uuid1_invalid"
   >
     <svg
diff --git a/packages/react/src/components/text-area/text-area.tsx b/packages/react/src/components/text-area/text-area.tsx
index 9b58f503fd..3043794e37 100644
--- a/packages/react/src/components/text-area/text-area.tsx
+++ b/packages/react/src/components/text-area/text-area.tsx
@@ -12,7 +12,7 @@ import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useId } from '../../hooks/use-id';
 import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../field/field-container';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
 import { ScreenReaderOnlyText } from '../screen-reader-only-text/ScreenReaderOnlyText';

From e39014b8c2b1d64411167d7f866fc391025646d4 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Mon, 2 Dec 2024 16:55:26 -0500
Subject: [PATCH 16/23] chore(form-field): post master merge

---
 packages/react/src/components/combobox/combobox.tsx           | 2 +-
 packages/react/src/components/date-picker/date-picker.tsx     | 2 +-
 packages/react/src/components/dropdown-list/dropdown-list.tsx | 2 +-
 packages/react/src/components/feedbacks/types.ts              | 2 +-
 .../src/components/{field => field-container}/context.ts      | 0
 .../{field => field-container}/field-container.test.tsx       | 0
 .../{field => field-container}/field-container.test.tsx.snap  | 0
 .../components/{field => field-container}/field-container.tsx | 0
 .../react/src/components/{field => field-container}/types.ts  | 0
 .../react/src/components/{field => field-container}/utils.ts  | 0
 packages/react/src/components/input/input.tsx                 | 2 +-
 packages/react/src/components/input/types.ts                  | 2 +-
 packages/react/src/components/label/types.ts                  | 2 +-
 .../password-creation-input/password-creation-input.tsx       | 4 ++--
 .../react/src/components/password-input/password-input.tsx    | 4 ++--
 packages/react/src/components/slider/slider.tsx               | 2 +-
 packages/react/src/components/stepper-input/stepper-input.tsx | 4 ++--
 packages/react/src/components/text-area/text-area.tsx         | 4 ++--
 packages/react/src/components/text-input/text-input.tsx       | 4 ++--
 19 files changed, 18 insertions(+), 18 deletions(-)
 rename packages/react/src/components/{field => field-container}/context.ts (100%)
 rename packages/react/src/components/{field => field-container}/field-container.test.tsx (100%)
 rename packages/react/src/components/{field => field-container}/field-container.test.tsx.snap (100%)
 rename packages/react/src/components/{field => field-container}/field-container.tsx (100%)
 rename packages/react/src/components/{field => field-container}/types.ts (100%)
 rename packages/react/src/components/{field => field-container}/utils.ts (100%)

diff --git a/packages/react/src/components/combobox/combobox.tsx b/packages/react/src/components/combobox/combobox.tsx
index 4af0fa302a..2bdc426d1c 100644
--- a/packages/react/src/components/combobox/combobox.tsx
+++ b/packages/react/src/components/combobox/combobox.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field/field-container';
+import { FieldContainer } from '../field-container/field-container';
 import { IconButton } from '../buttons/icon-button';
 import { Listbox, ListboxOption } from '../listbox/listbox';
 import { TooltipProps } from '../tooltip/tooltip';
diff --git a/packages/react/src/components/date-picker/date-picker.tsx b/packages/react/src/components/date-picker/date-picker.tsx
index 8e43efd768..57a8570f70 100644
--- a/packages/react/src/components/date-picker/date-picker.tsx
+++ b/packages/react/src/components/date-picker/date-picker.tsx
@@ -26,7 +26,7 @@ import { v4 as uuid } from '../../utils/uuid';
 import { AbstractButton } from '../buttons/abstract/abstract-button';
 import { Button } from '../buttons/button';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field/field-container';
+import { FieldContainer } from '../field-container/field-container';
 import { Icon } from '../icon/icon';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.tsx b/packages/react/src/components/dropdown-list/dropdown-list.tsx
index 55e998b2b4..093f092e6e 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.tsx
+++ b/packages/react/src/components/dropdown-list/dropdown-list.tsx
@@ -14,7 +14,7 @@ import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { isLetterOrNumber } from '../../utils/regex';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field/field-container';
+import { FieldContainer } from '../field-container/field-container';
 import { Icon, IconName } from '../icon/icon';
 import { Listbox, ListboxOption } from '../listbox/listbox';
 import { TooltipProps } from '../tooltip/tooltip';
diff --git a/packages/react/src/components/feedbacks/types.ts b/packages/react/src/components/feedbacks/types.ts
index 85710e0338..0801a36ed9 100644
--- a/packages/react/src/components/feedbacks/types.ts
+++ b/packages/react/src/components/feedbacks/types.ts
@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
-import { FieldContainerProps } from '../field/types';
+import { FieldContainerProps } from '../field-container/types';
 
 export type BaseSpanProps = Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
     | 'id' | 'className'
diff --git a/packages/react/src/components/field/context.ts b/packages/react/src/components/field-container/context.ts
similarity index 100%
rename from packages/react/src/components/field/context.ts
rename to packages/react/src/components/field-container/context.ts
diff --git a/packages/react/src/components/field/field-container.test.tsx b/packages/react/src/components/field-container/field-container.test.tsx
similarity index 100%
rename from packages/react/src/components/field/field-container.test.tsx
rename to packages/react/src/components/field-container/field-container.test.tsx
diff --git a/packages/react/src/components/field/field-container.test.tsx.snap b/packages/react/src/components/field-container/field-container.test.tsx.snap
similarity index 100%
rename from packages/react/src/components/field/field-container.test.tsx.snap
rename to packages/react/src/components/field-container/field-container.test.tsx.snap
diff --git a/packages/react/src/components/field/field-container.tsx b/packages/react/src/components/field-container/field-container.tsx
similarity index 100%
rename from packages/react/src/components/field/field-container.tsx
rename to packages/react/src/components/field-container/field-container.tsx
diff --git a/packages/react/src/components/field/types.ts b/packages/react/src/components/field-container/types.ts
similarity index 100%
rename from packages/react/src/components/field/types.ts
rename to packages/react/src/components/field-container/types.ts
diff --git a/packages/react/src/components/field/utils.ts b/packages/react/src/components/field-container/utils.ts
similarity index 100%
rename from packages/react/src/components/field/utils.ts
rename to packages/react/src/components/field-container/utils.ts
diff --git a/packages/react/src/components/input/input.tsx b/packages/react/src/components/input/input.tsx
index 4fc5fbb4ec..1db49a1838 100644
--- a/packages/react/src/components/input/input.tsx
+++ b/packages/react/src/components/input/input.tsx
@@ -2,7 +2,7 @@ import { forwardRef, ReactElement, Ref } from 'react';
 import styled from 'styled-components';
 import { useId } from '../../hooks/use-id';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { useFieldControlContext } from '../field/context';
+import { useFieldControlContext } from '../field-container/context';
 import { focus } from '../../utils/css-state';
 import { InputProps } from './types';
 
diff --git a/packages/react/src/components/input/types.ts b/packages/react/src/components/input/types.ts
index 6008924bde..c30778f752 100644
--- a/packages/react/src/components/input/types.ts
+++ b/packages/react/src/components/input/types.ts
@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
-import { FieldControlProps } from '../field/types';
+import { FieldControlProps } from '../field-container/types';
 
 type BaseInputProps = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
     | 'ref'
diff --git a/packages/react/src/components/label/types.ts b/packages/react/src/components/label/types.ts
index e40b5d48f4..290386f12c 100644
--- a/packages/react/src/components/label/types.ts
+++ b/packages/react/src/components/label/types.ts
@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, LabelHTMLAttributes } from 'react';
-import { FieldContainerProps } from '../field/types';
+import { FieldContainerProps } from '../field-container/types';
 
 export type BaseLabelProps = Pick<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>,
     | 'id' | 'className' | 'htmlFor'
diff --git a/packages/react/src/components/password-creation-input/password-creation-input.tsx b/packages/react/src/components/password-creation-input/password-creation-input.tsx
index 8374b35ded..b4673bc08a 100644
--- a/packages/react/src/components/password-creation-input/password-creation-input.tsx
+++ b/packages/react/src/components/password-creation-input/password-creation-input.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { IconButton } from '../buttons/icon-button';
 import { useTranslation } from '../../i18n/use-translation';
-import { FieldContainer } from '../field/field-container';
+import { FieldContainer } from '../field-container/field-container';
 import { Tooltip } from '../tooltip/tooltip';
 import { getPasswordStrength } from './password-strength';
 import { PasswordRule } from './password-rule';
@@ -80,7 +80,7 @@ export const PasswordCreationInput: VoidFunctionComponent<PasswordCreationInputP
 
     return (
         <FieldContainer
-            id={id}
+            fieldId={id}
             label={t('create-password')}
             validationErrorMessage=""
             noInvalidFieldIcon
diff --git a/packages/react/src/components/password-input/password-input.tsx b/packages/react/src/components/password-input/password-input.tsx
index 8673745c7d..995f9eefdb 100644
--- a/packages/react/src/components/password-input/password-input.tsx
+++ b/packages/react/src/components/password-input/password-input.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { v4 as uuid } from '../../utils/uuid';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field/field-container';
+import { FieldContainer } from '../field-container/field-container';
 import { Tooltip } from '../tooltip/tooltip';
 import { inputsStyle } from '../text-input/styles/inputs';
 
@@ -80,7 +80,7 @@ export const PasswordInput: VoidFunctionComponent<PasswordInputProps> = ({
 
     return (
         <FieldContainer
-            id={id}
+            fieldId={id}
             valid={isValid}
             label={label}
             hint={hint}
diff --git a/packages/react/src/components/slider/slider.tsx b/packages/react/src/components/slider/slider.tsx
index 59504cfea1..e55d5ea95f 100644
--- a/packages/react/src/components/slider/slider.tsx
+++ b/packages/react/src/components/slider/slider.tsx
@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { useTranslation } from '../../i18n/use-translation';
-import { FieldContainer } from '../field/field-container';
+import { FieldContainer } from '../field-container/field-container';
 import { TooltipProps } from '../tooltip/tooltip';
 import { useId } from '../../hooks/use-id';
 import { ValueTooltip } from './value-tooltip';
diff --git a/packages/react/src/components/stepper-input/stepper-input.tsx b/packages/react/src/components/stepper-input/stepper-input.tsx
index d8142485ed..21b31ca64d 100644
--- a/packages/react/src/components/stepper-input/stepper-input.tsx
+++ b/packages/react/src/components/stepper-input/stepper-input.tsx
@@ -15,7 +15,7 @@ import { useId } from '../../hooks/use-id';
 import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field/field-container';
+import { FieldContainer } from '../field-container/field-container';
 import { responsiveInputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
 import { StepperButtons } from './stepper-buttons';
@@ -178,7 +178,7 @@ export const StepperInput: VoidFunctionComponent<StepperInputProps> = ({
 
     return (
         <FieldContainer
-            id={fieldId}
+            fieldId={fieldId}
             hint={hint}
             label={label}
             tooltip={tooltip}
diff --git a/packages/react/src/components/text-area/text-area.tsx b/packages/react/src/components/text-area/text-area.tsx
index 3043794e37..1226ee7939 100644
--- a/packages/react/src/components/text-area/text-area.tsx
+++ b/packages/react/src/components/text-area/text-area.tsx
@@ -12,7 +12,7 @@ import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useId } from '../../hooks/use-id';
 import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
-import { FieldContainer } from '../field/field-container';
+import { FieldContainer } from '../field-container/field-container';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
 import { ScreenReaderOnlyText } from '../screen-reader-only-text/ScreenReaderOnlyText';
@@ -165,7 +165,7 @@ export const TextArea: VoidFunctionComponent<TextAreaProps> = ({
             data-testid="container"
             className={className}
             noMargin={noMargin}
-            id={idTextArea}
+            fieldId={idTextArea}
             label={label}
             required={required}
             tooltip={tooltip}
diff --git a/packages/react/src/components/text-input/text-input.tsx b/packages/react/src/components/text-input/text-input.tsx
index 863bb7af26..d2caaf6fb1 100644
--- a/packages/react/src/components/text-input/text-input.tsx
+++ b/packages/react/src/components/text-input/text-input.tsx
@@ -22,7 +22,7 @@ import styled, { css } from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field/field-container';
+import { FieldContainer } from '../field-container/field-container';
 import { TooltipProps } from '../tooltip/tooltip';
 import { inputsStyle } from './styles/inputs';
 import { useAriaConditionalIds } from '../../hooks/use-aria-conditional-ids';
@@ -224,7 +224,7 @@ export const TextInput = forwardRef(({
         <FieldContainer
             className={className}
             noMargin={noMargin}
-            id={fieldId}
+            fieldId={fieldId}
             label={label}
             required={required}
             tooltip={tooltip}

From b86c8ee43a92136cf21ba5bf282c0c8339d701f4 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Mon, 2 Dec 2024 17:00:04 -0500
Subject: [PATCH 17/23] chore(form-field): post master merge

---
 .../numeric-input/numeric-input.test.tsx.snap |  2 +-
 .../password-input.test.tsx.snap              | 20 ++++++++--------
 .../react/src/components/slider/slider.tsx    |  2 +-
 .../stepper-input/stepper-input.test.tsx.snap | 18 +++++++-------
 .../text-area/text-area.test.tsx.snap         |  8 +++----
 .../text-input/text-input.test.tsx.snap       | 24 +++++++++----------
 6 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
index 4647994106..f567edcc14 100644
--- a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
+++ b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
@@ -351,7 +351,7 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
   <span
     class="c2"
     data-testid="invalid-field"
-    id="uuid1_invalid"
+    id="uuid2_invalid"
   >
     <svg
       class="c3"
diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index 9c3998aeb9..c713d092f7 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -377,10 +377,10 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
       class="c3"
     >
       <span
-        aria-describedby="uuid2"
+        aria-describedby="uuid3"
         class="c4"
         data-testid="tooltip"
-        id="tooltip-trigger-uuid2"
+        id="tooltip-trigger-uuid3"
         tabindex="-1"
       >
         <button
@@ -405,7 +405,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
         class="c7"
         data-popper-interactive="false"
         data-testid="tooltip-content-container"
-        id="uuid2"
+        id="uuid3"
         role="tooltip"
         style="position:absolute;left:0;top:0"
       >
@@ -813,7 +813,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   <span
     class="c1"
     data-testid="invalid-field"
-    id="uuid1_invalid"
+    id="uuid2_invalid"
   >
     <svg
       class="c2"
@@ -841,10 +841,10 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
       class="c5"
     >
       <span
-        aria-describedby="uuid2"
+        aria-describedby="uuid3"
         class="c6"
         data-testid="tooltip"
-        id="tooltip-trigger-uuid2"
+        id="tooltip-trigger-uuid3"
         tabindex="-1"
       >
         <button
@@ -868,7 +868,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
         class="c9"
         data-popper-interactive="false"
         data-testid="tooltip-content-container"
-        id="uuid2"
+        id="uuid3"
         role="tooltip"
         style="position:absolute;left:0;top:0"
       >
@@ -1264,10 +1264,10 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
       class="c3"
     >
       <span
-        aria-describedby="uuid2"
+        aria-describedby="uuid3"
         class="c4"
         data-testid="tooltip"
-        id="tooltip-trigger-uuid2"
+        id="tooltip-trigger-uuid3"
         tabindex="-1"
       >
         <button
@@ -1291,7 +1291,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
         class="c7"
         data-popper-interactive="false"
         data-testid="tooltip-content-container"
-        id="uuid2"
+        id="uuid3"
         role="tooltip"
         style="position:absolute;left:0;top:0"
       >
diff --git a/packages/react/src/components/slider/slider.tsx b/packages/react/src/components/slider/slider.tsx
index e55d5ea95f..b214455e22 100644
--- a/packages/react/src/components/slider/slider.tsx
+++ b/packages/react/src/components/slider/slider.tsx
@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import { useTranslation } from '../../i18n/use-translation';
-import { FieldContainer } from '../field-container/field-container';
 import { TooltipProps } from '../tooltip/tooltip';
 import { useId } from '../../hooks/use-id';
+import { FieldContainer } from '../field-container/field-container';
 import { ValueTooltip } from './value-tooltip';
 import { Labels, SliderContainer, StyledSlider } from './styles';
 
diff --git a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
index f6df745b20..39ae2b8398 100644
--- a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
+++ b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
@@ -254,8 +254,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     test
   </label>
@@ -591,15 +591,15 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     test
   </label>
   <span
     class="c3"
     data-testid="invalid-field"
-    id="uuid1_invalid"
+    id="uuid2_invalid"
   >
     <svg
       class="c4"
@@ -795,8 +795,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     test
   </label>
@@ -1069,8 +1069,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     test
   </label>
diff --git a/packages/react/src/components/text-area/text-area.test.tsx.snap b/packages/react/src/components/text-area/text-area.test.tsx.snap
index 09b2ab6b49..1a6f70be29 100644
--- a/packages/react/src/components/text-area/text-area.test.tsx.snap
+++ b/packages/react/src/components/text-area/text-area.test.tsx.snap
@@ -119,8 +119,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid3"
+    id="uuid3_label"
   >
     Comment (required)
   </label>
@@ -256,8 +256,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid3"
+    id="uuid3_label"
   >
     Comment (required)
   </label>
diff --git a/packages/react/src/components/text-input/text-input.test.tsx.snap b/packages/react/src/components/text-input/text-input.test.tsx.snap
index 26fdda7fe7..9e25ac04ad 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx.snap
+++ b/packages/react/src/components/text-input/text-input.test.tsx.snap
@@ -139,8 +139,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Telephone
   </label>
@@ -298,8 +298,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Telephone (required)
   </label>
@@ -457,8 +457,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Telephone
   </label>
@@ -638,8 +638,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Telephone
   </label>
@@ -829,8 +829,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Telephone
   </label>
@@ -1019,8 +1019,8 @@ input + .c1 {
 >
   <label
     class="c1 c2"
-    for="uuid1"
-    id="uuid1_label"
+    for="uuid2"
+    id="uuid2_label"
   >
     Telephone
   </label>

From 5d9fccb2a03e74b05db01d72747ad58c219f02ac Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Tue, 3 Dec 2024 08:01:27 -0500
Subject: [PATCH 18/23] chore(form-field): post master merge

---
 packages/react/src/components/combobox/combobox.tsx      | 1 -
 .../src/components/feedbacks/invalid-field-message.tsx   | 4 +---
 packages/react/src/components/feedbacks/types.ts         | 8 ++------
 .../src/components/field-container/field-container.tsx   | 2 +-
 packages/react/src/components/hint/hint.tsx              | 4 +---
 packages/react/src/components/hint/types.ts              | 8 ++------
 packages/react/src/components/label/label.tsx            | 8 +++-----
 packages/react/src/components/label/types.ts             | 9 +++------
 .../password-creation-input/password-creation-input.tsx  | 2 +-
 .../src/components/search/search-input.test.tsx.snap     | 2 +-
 packages/react/src/components/search/search-input.tsx    | 2 +-
 packages/react/src/types/native-props.ts                 | 7 +++++++
 12 files changed, 23 insertions(+), 34 deletions(-)
 create mode 100644 packages/react/src/types/native-props.ts

diff --git a/packages/react/src/components/combobox/combobox.tsx b/packages/react/src/components/combobox/combobox.tsx
index 2bdc426d1c..2aa03a1c62 100644
--- a/packages/react/src/components/combobox/combobox.tsx
+++ b/packages/react/src/components/combobox/combobox.tsx
@@ -77,7 +77,6 @@ const Textbox = styled.input<TextboxProps>`
     width: 100%;
 
     ${focus};
-
     &::placeholder {
         color: ${({ theme }) => theme.component['combobox-placeholder-text-color']};
         font-style: italic;
diff --git a/packages/react/src/components/feedbacks/invalid-field-message.tsx b/packages/react/src/components/feedbacks/invalid-field-message.tsx
index 7afe6fb295..027f8468e3 100644
--- a/packages/react/src/components/feedbacks/invalid-field-message.tsx
+++ b/packages/react/src/components/feedbacks/invalid-field-message.tsx
@@ -19,7 +19,7 @@ const StyledIcon = styled(Icon)`
     margin-right: var(--spacing-base);
 `;
 
-const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<InvalidFieldMessageProps>> = ({
+export const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<InvalidFieldMessageProps>> = ({
     children, id, noInvalidFieldIcon,
 }) => {
     const { isMobile } = useDeviceContext();
@@ -37,5 +37,3 @@ const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<InvalidFieldM
         </StyledValidationMessage>
     );
 };
-
-export { InvalidFieldMessage };
diff --git a/packages/react/src/components/feedbacks/types.ts b/packages/react/src/components/feedbacks/types.ts
index 0801a36ed9..882faefe2a 100644
--- a/packages/react/src/components/feedbacks/types.ts
+++ b/packages/react/src/components/feedbacks/types.ts
@@ -1,10 +1,6 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react';
+import { NativeSpanProps } from '../../types/native-props';
 import { FieldContainerProps } from '../field-container/types';
 
-export type BaseSpanProps = Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
-    | 'id' | 'className'
->;
-
 type CommonFieldContainerProps = Pick<FieldContainerProps, 'noInvalidFieldIcon'>;
 
-export interface InvalidFieldMessageProps extends BaseSpanProps, CommonFieldContainerProps {}
+export interface InvalidFieldMessageProps extends NativeSpanProps, CommonFieldContainerProps {}
diff --git a/packages/react/src/components/field-container/field-container.tsx b/packages/react/src/components/field-container/field-container.tsx
index ded9411cb2..14ccf2ae2f 100644
--- a/packages/react/src/components/field-container/field-container.tsx
+++ b/packages/react/src/components/field-container/field-container.tsx
@@ -78,7 +78,7 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
                 {label && (
                     <Label
                         id={slotIds.label}
-                        htmlFor={fieldId}
+                        forId={fieldId}
                         tooltip={tooltip}
                         required={required}
                     >
diff --git a/packages/react/src/components/hint/hint.tsx b/packages/react/src/components/hint/hint.tsx
index 77f07acddd..53e7033751 100644
--- a/packages/react/src/components/hint/hint.tsx
+++ b/packages/react/src/components/hint/hint.tsx
@@ -12,7 +12,7 @@ const StyledHint = styled.span<{ $isMobile: boolean }>`
     line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
 `;
 
-const Hint: VoidFunctionComponent<PropsWithChildren<HintProps>> = ({
+export const Hint: VoidFunctionComponent<PropsWithChildren<HintProps>> = ({
     children, id,
 }) => {
     const { isMobile } = useDeviceContext();
@@ -27,5 +27,3 @@ const Hint: VoidFunctionComponent<PropsWithChildren<HintProps>> = ({
         </StyledHint>
     );
 };
-
-export { Hint };
diff --git a/packages/react/src/components/hint/types.ts b/packages/react/src/components/hint/types.ts
index 1c2d2f6621..7b539f205a 100644
--- a/packages/react/src/components/hint/types.ts
+++ b/packages/react/src/components/hint/types.ts
@@ -1,7 +1,3 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react';
+import { NativeSpanProps } from '../../types/native-props';
 
-export type BaseSpanProps = Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
-    | 'id' | 'className'
->;
-
-export interface HintProps extends BaseSpanProps {}
+export interface HintProps extends NativeSpanProps {}
diff --git a/packages/react/src/components/label/label.tsx b/packages/react/src/components/label/label.tsx
index f86294e13d..c4a4dba183 100644
--- a/packages/react/src/components/label/label.tsx
+++ b/packages/react/src/components/label/label.tsx
@@ -45,15 +45,15 @@ const RequiredLabel: FunctionComponent<RequiredLabelProps> = ({ type }) => {
     }
 };
 
-const Label: FunctionComponent<PropsWithChildren<LabelProps>> = ({
-    className, children, htmlFor, id, tooltip, required, requiredLabelType = 'text',
+export const Label: FunctionComponent<PropsWithChildren<LabelProps>> = ({
+    className, children, forId, id, tooltip, required, requiredLabelType = 'text',
 }) => {
     const WrapperComponent = tooltip ? StyledWrapper : Fragment;
     const { isMobile } = useDeviceContext();
 
     return (
         <WrapperComponent>
-            <StyledLabel className={className} htmlFor={htmlFor} id={id} $isMobile={isMobile}>
+            <StyledLabel className={className} htmlFor={forId} id={id} $isMobile={isMobile}>
                 {children}
                 {required && <RequiredLabel type={requiredLabelType} />}
             </StyledLabel>
@@ -61,5 +61,3 @@ const Label: FunctionComponent<PropsWithChildren<LabelProps>> = ({
         </WrapperComponent>
     );
 };
-
-export { Label };
diff --git a/packages/react/src/components/label/types.ts b/packages/react/src/components/label/types.ts
index 290386f12c..1ee856c645 100644
--- a/packages/react/src/components/label/types.ts
+++ b/packages/react/src/components/label/types.ts
@@ -1,13 +1,10 @@
-import { DetailedHTMLProps, LabelHTMLAttributes } from 'react';
+import { NativeLabelProps } from '../../types/native-props';
 import { FieldContainerProps } from '../field-container/types';
 
-export type BaseLabelProps = Pick<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>,
-    | 'id' | 'className' | 'htmlFor'
->;
-
 type CommonFieldContainerProps = Pick<FieldContainerProps, 'required' | 'tooltip'>;
 
-export interface LabelProps extends BaseLabelProps, CommonFieldContainerProps {
+export interface LabelProps extends NativeLabelProps, CommonFieldContainerProps {
+    forId: string;
     requiredLabelType?: 'text';
 }
 
diff --git a/packages/react/src/components/password-creation-input/password-creation-input.tsx b/packages/react/src/components/password-creation-input/password-creation-input.tsx
index b4673bc08a..86bcb8e333 100644
--- a/packages/react/src/components/password-creation-input/password-creation-input.tsx
+++ b/packages/react/src/components/password-creation-input/password-creation-input.tsx
@@ -2,8 +2,8 @@ import { ChangeEvent, useState, VoidFunctionComponent, useMemo } from 'react';
 import styled from 'styled-components';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { IconButton } from '../buttons/icon-button';
-import { useTranslation } from '../../i18n/use-translation';
 import { FieldContainer } from '../field-container/field-container';
+import { useTranslation } from '../../i18n/use-translation';
 import { Tooltip } from '../tooltip/tooltip';
 import { getPasswordStrength } from './password-strength';
 import { PasswordRule } from './password-rule';
diff --git a/packages/react/src/components/search/search-input.test.tsx.snap b/packages/react/src/components/search/search-input.test.tsx.snap
index e78f5e02d7..214f18a9c1 100644
--- a/packages/react/src/components/search/search-input.test.tsx.snap
+++ b/packages/react/src/components/search/search-input.test.tsx.snap
@@ -310,7 +310,7 @@ input:valid + .c8 {
         >
           <Label
             data-testid="search-icon"
-            htmlFor="search-input"
+            forId="search-input"
           >
             <styled.label
               $isMobile={false}
diff --git a/packages/react/src/components/search/search-input.tsx b/packages/react/src/components/search/search-input.tsx
index 391e52984f..544cdcf0c6 100644
--- a/packages/react/src/components/search/search-input.tsx
+++ b/packages/react/src/components/search/search-input.tsx
@@ -185,7 +185,7 @@ export const SearchInput: VoidFunctionComponent<SearchInputProps> = ({
         <SearchWrapper className={className}>
             <InnerWrapper>
                 {hasIcon && (
-                    <Label htmlFor={id} data-testid="search-icon">
+                    <Label forId={id} data-testid="search-icon">
                         <IcoSearch disabled={disabled} />
                         <VisuallyHidden>{label || t('label')}</VisuallyHidden>
                     </Label>
diff --git a/packages/react/src/types/native-props.ts b/packages/react/src/types/native-props.ts
new file mode 100644
index 0000000000..aa3681f793
--- /dev/null
+++ b/packages/react/src/types/native-props.ts
@@ -0,0 +1,7 @@
+import { DetailedHTMLProps, HTMLAttributes, InputHTMLAttributes } from 'react';
+
+export type NativeInputProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+export type NativeSpanProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+
+export type NativeLabelProps = DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;

From 5b6ca16ec4b30a02732db64785dc955bef3e1692 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Tue, 3 Dec 2024 08:17:00 -0500
Subject: [PATCH 19/23] chore(form-field): post master merge

---
 .../combobox/combobox.test.tsx.snap           |  3 ++
 .../src/components/combobox/combobox.tsx      |  1 +
 .../date-picker/date-picker.test.tsx.snap     |  9 ++++
 .../dropdown-list/dropdown-list.test.tsx.snap |  4 ++
 .../feedbacks/invalid-field-message.tsx       | 24 +++++++---
 .../react/src/components/feedbacks/types.ts   |  4 +-
 .../field-container/field-container.tsx       | 22 +++-------
 .../src/components/field-container/types.ts   |  7 +++
 .../src/components/field-container/utils.ts   |  7 +--
 packages/react/src/components/hint/hint.tsx   | 23 +++++++---
 packages/react/src/components/hint/types.ts   |  4 +-
 packages/react/src/components/input/types.ts  |  6 +--
 .../react/src/components/label/label.test.tsx |  4 +-
 .../src/components/label/label.test.tsx.snap  |  2 +
 packages/react/src/components/label/label.tsx | 44 +++++++++++++++----
 packages/react/src/components/label/types.ts  |  6 ++-
 .../search/search-input.test.tsx.snap         |  4 ++
 .../components/slider/slider.test.tsx.snap    |  3 ++
 .../stepper-input/stepper-input.test.tsx.snap |  4 ++
 .../text-area/text-area.test.tsx.snap         |  2 +
 .../text-input/text-input.test.tsx.snap       |  6 +++
 21 files changed, 139 insertions(+), 50 deletions(-)

diff --git a/packages/react/src/components/combobox/combobox.test.tsx.snap b/packages/react/src/components/combobox/combobox.test.tsx.snap
index b7008d2b5e..07a0e6b8ea 100644
--- a/packages/react/src/components/combobox/combobox.test.tsx.snap
+++ b/packages/react/src/components/combobox/combobox.test.tsx.snap
@@ -266,6 +266,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -770,6 +771,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1722,6 +1724,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
diff --git a/packages/react/src/components/combobox/combobox.tsx b/packages/react/src/components/combobox/combobox.tsx
index 2aa03a1c62..2bdc426d1c 100644
--- a/packages/react/src/components/combobox/combobox.tsx
+++ b/packages/react/src/components/combobox/combobox.tsx
@@ -77,6 +77,7 @@ const Textbox = styled.input<TextboxProps>`
     width: 100%;
 
     ${focus};
+
     &::placeholder {
         color: ${({ theme }) => theme.component['combobox-placeholder-text-color']};
         font-style: italic;
diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
index 5ce12fea63..f49107a729 100644
--- a/packages/react/src/components/date-picker/date-picker.test.tsx.snap
+++ b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -350,6 +350,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -740,6 +741,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1132,6 +1134,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1524,6 +1527,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1944,6 +1948,7 @@ label + .c5 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -2350,6 +2355,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -2908,6 +2914,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -4209,6 +4216,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -5485,6 +5493,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
index 5b5e85e4a4..988e209724 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
+++ b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
@@ -217,6 +217,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -665,6 +666,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1139,6 +1141,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -2561,6 +2564,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
diff --git a/packages/react/src/components/feedbacks/invalid-field-message.tsx b/packages/react/src/components/feedbacks/invalid-field-message.tsx
index 027f8468e3..174dcef908 100644
--- a/packages/react/src/components/feedbacks/invalid-field-message.tsx
+++ b/packages/react/src/components/feedbacks/invalid-field-message.tsx
@@ -1,6 +1,9 @@
-import { PropsWithChildren, VoidFunctionComponent } from 'react';
+import { forwardRef, PropsWithChildren, ReactElement, Ref } from 'react';
 import styled from 'styled-components';
+import { useDataAttributes } from '../../hooks/use-data-attributes';
+import { useId } from '../../hooks/use-id';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { useFieldControlContext } from '../field-container/context';
 import { Icon } from '../icon/icon';
 import { InvalidFieldMessageProps } from './types';
 
@@ -19,16 +22,25 @@ const StyledIcon = styled(Icon)`
     margin-right: var(--spacing-base);
 `;
 
-export const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<InvalidFieldMessageProps>> = ({
-    children, id, noInvalidFieldIcon,
-}) => {
+export const InvalidFieldMessage = forwardRef(({
+    children,
+    id: providedId,
+    noInvalidFieldIcon,
+    ...otherProps
+}: PropsWithChildren<InvalidFieldMessageProps>, ref: Ref<HTMLSpanElement>): ReactElement => {
     const { isMobile } = useDeviceContext();
+    const dataAttributes = useDataAttributes(otherProps);
+    const { slotIds } = useFieldControlContext({});
+    const id = useId(providedId ?? slotIds?.invalid);
 
     return (
         <StyledValidationMessage
             data-testid="invalid-field"
             id={id}
+            ref={ref}
             $isMobile={isMobile}
+            {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
+            {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
         >
             {!noInvalidFieldIcon && (
                 <StyledIcon name="alertOctagon" size={isMobile ? '24' : '16'} />
@@ -36,4 +48,6 @@ export const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<Invali
             {children}
         </StyledValidationMessage>
     );
-};
+});
+
+InvalidFieldMessage.displayName = 'InvalidFieldMessage';
diff --git a/packages/react/src/components/feedbacks/types.ts b/packages/react/src/components/feedbacks/types.ts
index 882faefe2a..1d11af5e1c 100644
--- a/packages/react/src/components/feedbacks/types.ts
+++ b/packages/react/src/components/feedbacks/types.ts
@@ -1,6 +1,8 @@
 import { NativeSpanProps } from '../../types/native-props';
 import { FieldContainerProps } from '../field-container/types';
 
+type PartialNativeSpanProps = Omit<NativeSpanProps, 'ref'>;
+
 type CommonFieldContainerProps = Pick<FieldContainerProps, 'noInvalidFieldIcon'>;
 
-export interface InvalidFieldMessageProps extends NativeSpanProps, CommonFieldContainerProps {}
+export interface InvalidFieldMessageProps extends PartialNativeSpanProps, CommonFieldContainerProps {}
diff --git a/packages/react/src/components/field-container/field-container.tsx b/packages/react/src/components/field-container/field-container.tsx
index 14ccf2ae2f..e8db1c3092 100644
--- a/packages/react/src/components/field-container/field-container.tsx
+++ b/packages/react/src/components/field-container/field-container.tsx
@@ -63,7 +63,8 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
         hint,
         required,
         disabled,
-    }), [fieldId, ariaLabel, ariaLabelledby, ariaDescribedby, valid, hint, required, disabled]);
+        slotIds,
+    }), [fieldId, ariaLabel, ariaLabelledby, ariaDescribedby, valid, hint, required, disabled, slotIds]);
 
     return (
         <FieldControlContext.Provider value={contextValues}>
@@ -75,23 +76,10 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
                 $valid={valid}
                 {...props /* eslint-disable-line react/jsx-props-no-spreading */}
             >
-                {label && (
-                    <Label
-                        id={slotIds.label}
-                        forId={fieldId}
-                        tooltip={tooltip}
-                        required={required}
-                    >
-                        {label}
-                    </Label>
-                )}
-                {hint && (
-                    <Hint id={slotIds.hint}>
-                        {hint}
-                    </Hint>
-                )}
+                {label && <Label tooltip={tooltip}>{label}</Label>}
+                {hint && <Hint>{hint}</Hint>}
                 {!valid && (
-                    <InvalidFieldMessage id={slotIds.invalid} noInvalidFieldIcon={noInvalidFieldIcon}>
+                    <InvalidFieldMessage noInvalidFieldIcon={noInvalidFieldIcon}>
                         {validationErrorMessage}
                     </InvalidFieldMessage>
                 )}
diff --git a/packages/react/src/components/field-container/types.ts b/packages/react/src/components/field-container/types.ts
index 00d085807c..4f1fc6fe9b 100644
--- a/packages/react/src/components/field-container/types.ts
+++ b/packages/react/src/components/field-container/types.ts
@@ -1,5 +1,11 @@
 import { TooltipProps } from '../tooltip/tooltip';
 
+export interface FieldSlotIds {
+    label?: string;
+    hint?: string;
+    invalid?: string;
+}
+
 export interface FieldControlProps {
     id?: string;
     ariaLabel?: string;
@@ -8,6 +14,7 @@ export interface FieldControlProps {
     disabled?: boolean;
     required?: boolean;
     valid?: boolean;
+    slotIds?: FieldSlotIds;
 }
 
 export interface FieldContainerProps extends FieldControlProps {
diff --git a/packages/react/src/components/field-container/utils.ts b/packages/react/src/components/field-container/utils.ts
index 1aeec1ebf3..5c5261ecb7 100644
--- a/packages/react/src/components/field-container/utils.ts
+++ b/packages/react/src/components/field-container/utils.ts
@@ -1,12 +1,7 @@
 import { ReactNode } from 'react';
 import { devConsole } from '../../utils/dev-console';
 import { joinStrings } from '../../utils/string';
-
-interface FieldSlotIds {
-    label?: string;
-    hint?: string;
-    invalid?: string;
-}
+import { FieldSlotIds } from './types';
 
 export function getSlotId(prop: ReactNode, fieldId: string, propName: string): string | undefined {
     return prop ? `${fieldId}_${propName}` : undefined;
diff --git a/packages/react/src/components/hint/hint.tsx b/packages/react/src/components/hint/hint.tsx
index 53e7033751..1f45c40226 100644
--- a/packages/react/src/components/hint/hint.tsx
+++ b/packages/react/src/components/hint/hint.tsx
@@ -1,6 +1,9 @@
-import { PropsWithChildren, VoidFunctionComponent } from 'react';
+import { forwardRef, PropsWithChildren, ReactElement, Ref } from 'react';
 import styled from 'styled-components';
+import { useDataAttributes } from '../../hooks/use-data-attributes';
+import { useId } from '../../hooks/use-id';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { useFieldControlContext } from '../field-container/context';
 import { HintProps } from './types';
 
 const StyledHint = styled.span<{ $isMobile: boolean }>`
@@ -12,18 +15,28 @@ const StyledHint = styled.span<{ $isMobile: boolean }>`
     line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
 `;
 
-export const Hint: VoidFunctionComponent<PropsWithChildren<HintProps>> = ({
-    children, id,
-}) => {
+export const Hint = forwardRef(({
+    children,
+    id: providedId,
+    ...otherProps
+}: PropsWithChildren<HintProps>, ref: Ref<HTMLSpanElement>): ReactElement => {
     const { isMobile } = useDeviceContext();
+    const dataAttributes = useDataAttributes(otherProps);
+    const { slotIds } = useFieldControlContext({});
+    const id = useId(providedId ?? slotIds?.hint);
 
     return (
         <StyledHint
             data-testid="field-hint"
             id={id}
+            ref={ref}
             $isMobile={isMobile}
+            {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
+            {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
         >
             {children}
         </StyledHint>
     );
-};
+});
+
+Hint.displayName = 'Hint';
diff --git a/packages/react/src/components/hint/types.ts b/packages/react/src/components/hint/types.ts
index 7b539f205a..df2ff5c53f 100644
--- a/packages/react/src/components/hint/types.ts
+++ b/packages/react/src/components/hint/types.ts
@@ -1,3 +1,5 @@
 import { NativeSpanProps } from '../../types/native-props';
 
-export interface HintProps extends NativeSpanProps {}
+type PartialNativeSpanProps = Omit<NativeSpanProps, 'ref'>
+
+export interface HintProps extends PartialNativeSpanProps {}
diff --git a/packages/react/src/components/input/types.ts b/packages/react/src/components/input/types.ts
index c30778f752..2db37b468d 100644
--- a/packages/react/src/components/input/types.ts
+++ b/packages/react/src/components/input/types.ts
@@ -1,7 +1,7 @@
-import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { NativeInputProps } from '../../types/native-props';
 import { FieldControlProps } from '../field-container/types';
 
-type BaseInputProps = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+type PartialNativeInputProps = Omit<NativeInputProps,
     | 'ref'
 >;
 
@@ -12,4 +12,4 @@ type CommonFieldControlProps = Pick<FieldControlProps,
     | 'valid'
 >;
 
-export type InputProps = BaseInputProps & CommonFieldControlProps;
+export type InputProps = PartialNativeInputProps & CommonFieldControlProps;
diff --git a/packages/react/src/components/label/label.test.tsx b/packages/react/src/components/label/label.test.tsx
index 8eeaa77991..1cc1f09c8e 100644
--- a/packages/react/src/components/label/label.test.tsx
+++ b/packages/react/src/components/label/label.test.tsx
@@ -4,14 +4,14 @@ import { Label } from './label';
 
 describe('Label', () => {
     test('contains tooltip when tooltip prop is defined', () => {
-        const wrapper = mountWithTheme(<Label htmlFor="test" tooltip={{ label: 'test' }}>Test</Label>);
+        const wrapper = mountWithTheme(<Label forId="test" tooltip={{ label: 'test' }}>Test</Label>);
 
         expect(wrapper.find(Tooltip).exists()).toBe(true);
     });
 
     test('Matches the snapshot', () => {
         const tree = renderWithTheme(
-            <Label htmlFor="test-id">
+            <Label forId="test-id">
                 Children
             </Label>,
         );
diff --git a/packages/react/src/components/label/label.test.tsx.snap b/packages/react/src/components/label/label.test.tsx.snap
index 44e2e9ab35..a689ec389f 100644
--- a/packages/react/src/components/label/label.test.tsx.snap
+++ b/packages/react/src/components/label/label.test.tsx.snap
@@ -23,7 +23,9 @@ input + .c0 {
 
 <label
   class="c0 c1"
+  data-testid="label"
   for="test-id"
+  id="uuid1"
 >
   Children
 </label>
diff --git a/packages/react/src/components/label/label.tsx b/packages/react/src/components/label/label.tsx
index c4a4dba183..a3a82c00de 100644
--- a/packages/react/src/components/label/label.tsx
+++ b/packages/react/src/components/label/label.tsx
@@ -1,6 +1,9 @@
-import { Fragment, FunctionComponent, PropsWithChildren } from 'react';
+import { forwardRef, Fragment, FunctionComponent, PropsWithChildren, ReactElement, Ref } from 'react';
 import styled from 'styled-components';
+import { useDataAttributes } from '../../hooks/use-data-attributes';
+import { useId } from '../../hooks/use-id';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { useFieldControlContext } from '../field-container/context';
 import { Tooltip } from '../tooltip/tooltip';
 import { useTranslation } from '../../i18n/use-translation';
 import { LabelProps, RequiredLabelProps } from './types';
@@ -45,19 +48,44 @@ const RequiredLabel: FunctionComponent<RequiredLabelProps> = ({ type }) => {
     }
 };
 
-export const Label: FunctionComponent<PropsWithChildren<LabelProps>> = ({
-    className, children, forId, id, tooltip, required, requiredLabelType = 'text',
-}) => {
-    const WrapperComponent = tooltip ? StyledWrapper : Fragment;
+export const Label = forwardRef(({
+    id: providedId,
+    forId: providedForId,
+    className,
+    children,
+    tooltip,
+    ...otherProps
+}: PropsWithChildren<LabelProps>, ref: Ref<HTMLLabelElement>): ReactElement => {
     const { isMobile } = useDeviceContext();
+    const dataAttributes = useDataAttributes(otherProps);
+    const {
+        id: inputId,
+        slotIds,
+        required,
+    } = useFieldControlContext({});
+    const id = useId(slotIds?.label ?? providedId);
+    const htmlFor = inputId ?? providedForId;
+
+    const WrapperComponent = tooltip ? StyledWrapper : Fragment;
 
     return (
         <WrapperComponent>
-            <StyledLabel className={className} htmlFor={forId} id={id} $isMobile={isMobile}>
+            <StyledLabel
+                data-testid={`${inputId ? 'field-' : ''}label`}
+                className={className}
+                htmlFor={htmlFor}
+                id={id}
+                ref={ref}
+                $isMobile={isMobile}
+                {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
+                {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
+            >
                 {children}
-                {required && <RequiredLabel type={requiredLabelType} />}
+                {required && <RequiredLabel />}
             </StyledLabel>
             {tooltip && <StyledTooltip {...tooltip} /* eslint-disable-line react/jsx-props-no-spreading */ />}
         </WrapperComponent>
     );
-};
+});
+
+Label.displayName = 'Label';
diff --git a/packages/react/src/components/label/types.ts b/packages/react/src/components/label/types.ts
index 1ee856c645..cceff0f4ed 100644
--- a/packages/react/src/components/label/types.ts
+++ b/packages/react/src/components/label/types.ts
@@ -1,10 +1,12 @@
 import { NativeLabelProps } from '../../types/native-props';
 import { FieldContainerProps } from '../field-container/types';
 
+type PartialNativeLabelProps = Omit<NativeLabelProps, 'ref'>;
+
 type CommonFieldContainerProps = Pick<FieldContainerProps, 'required' | 'tooltip'>;
 
-export interface LabelProps extends NativeLabelProps, CommonFieldContainerProps {
-    forId: string;
+export interface LabelProps extends PartialNativeLabelProps, CommonFieldContainerProps {
+    forId?: string;
     requiredLabelType?: 'text';
 }
 
diff --git a/packages/react/src/components/search/search-input.test.tsx.snap b/packages/react/src/components/search/search-input.test.tsx.snap
index 214f18a9c1..75362d991c 100644
--- a/packages/react/src/components/search/search-input.test.tsx.snap
+++ b/packages/react/src/components/search/search-input.test.tsx.snap
@@ -314,11 +314,15 @@ input:valid + .c8 {
           >
             <styled.label
               $isMobile={false}
+              data-testid="search-icon"
               htmlFor="search-input"
+              id="uuid1"
             >
               <label
                 className="c2 c3"
+                data-testid="search-icon"
                 htmlFor="search-input"
+                id="uuid1"
               >
                 <styled.svg
                   disabled={true}
diff --git a/packages/react/src/components/slider/slider.test.tsx.snap b/packages/react/src/components/slider/slider.test.tsx.snap
index 54d2ee1077..470b6f94c7 100644
--- a/packages/react/src/components/slider/slider.test.tsx.snap
+++ b/packages/react/src/components/slider/slider.test.tsx.snap
@@ -236,6 +236,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -556,6 +557,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -851,6 +853,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
diff --git a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
index 39ae2b8398..08d2407d92 100644
--- a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
+++ b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
@@ -254,6 +254,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -591,6 +592,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -795,6 +797,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1069,6 +1072,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
diff --git a/packages/react/src/components/text-area/text-area.test.tsx.snap b/packages/react/src/components/text-area/text-area.test.tsx.snap
index 1a6f70be29..3b6c22fa32 100644
--- a/packages/react/src/components/text-area/text-area.test.tsx.snap
+++ b/packages/react/src/components/text-area/text-area.test.tsx.snap
@@ -119,6 +119,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid3"
     id="uuid3_label"
   >
@@ -256,6 +257,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid3"
     id="uuid3_label"
   >
diff --git a/packages/react/src/components/text-input/text-input.test.tsx.snap b/packages/react/src/components/text-input/text-input.test.tsx.snap
index 9e25ac04ad..15072da459 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx.snap
+++ b/packages/react/src/components/text-input/text-input.test.tsx.snap
@@ -139,6 +139,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -298,6 +299,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -457,6 +459,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -638,6 +641,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -829,6 +833,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1019,6 +1024,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >

From 556ff6f35212d672fa11214e8668fe9cffe3164b Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Tue, 3 Dec 2024 08:50:09 -0500
Subject: [PATCH 20/23] chore(form-field): post master merge

---
 .../feedbacks/invalid-field-message.tsx       | 18 +----------
 .../react/src/components/feedbacks/styled.ts  | 17 +++++++++++
 .../field-container/field-container.tsx       | 30 ++++---------------
 .../src/components/field-container/styled.ts  | 22 ++++++++++++++
 packages/react/src/components/hint/hint.tsx   | 11 +------
 packages/react/src/components/hint/styled.ts  | 10 +++++++
 packages/react/src/components/label/label.tsx | 27 +----------------
 packages/react/src/components/label/styled.ts | 26 ++++++++++++++++
 8 files changed, 84 insertions(+), 77 deletions(-)
 create mode 100644 packages/react/src/components/feedbacks/styled.ts
 create mode 100644 packages/react/src/components/field-container/styled.ts
 create mode 100644 packages/react/src/components/hint/styled.ts
 create mode 100644 packages/react/src/components/label/styled.ts

diff --git a/packages/react/src/components/feedbacks/invalid-field-message.tsx b/packages/react/src/components/feedbacks/invalid-field-message.tsx
index 174dcef908..0e364346b5 100644
--- a/packages/react/src/components/feedbacks/invalid-field-message.tsx
+++ b/packages/react/src/components/feedbacks/invalid-field-message.tsx
@@ -1,27 +1,11 @@
 import { forwardRef, PropsWithChildren, ReactElement, Ref } from 'react';
-import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useId } from '../../hooks/use-id';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { useFieldControlContext } from '../field-container/context';
-import { Icon } from '../icon/icon';
+import { StyledIcon, StyledValidationMessage } from './styled';
 import { InvalidFieldMessageProps } from './types';
 
-const StyledValidationMessage = styled.span<{ $isMobile: boolean }>`
-    color: ${(props) => props.theme.component['field-error-text-color']};
-    display: flex;
-    font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
-    font-weight: var(--font-normal);
-    letter-spacing: 0.02rem;
-    line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
-`;
-
-const StyledIcon = styled(Icon)`
-    align-self: center;
-    display: flex;
-    margin-right: var(--spacing-base);
-`;
-
 export const InvalidFieldMessage = forwardRef(({
     children,
     id: providedId,
diff --git a/packages/react/src/components/feedbacks/styled.ts b/packages/react/src/components/feedbacks/styled.ts
new file mode 100644
index 0000000000..ebe4a69c05
--- /dev/null
+++ b/packages/react/src/components/feedbacks/styled.ts
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { Icon } from '../icon/icon';
+
+export const StyledValidationMessage = styled.span<{ $isMobile: boolean }>`
+    color: ${(props) => props.theme.component['field-error-text-color']};
+    display: flex;
+    font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
+    font-weight: var(--font-normal);
+    letter-spacing: 0.02rem;
+    line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
+`;
+
+export const StyledIcon = styled(Icon)`
+    align-self: center;
+    display: flex;
+    margin-right: var(--spacing-base);
+`;
diff --git a/packages/react/src/components/field-container/field-container.tsx b/packages/react/src/components/field-container/field-container.tsx
index e8db1c3092..019d3b85b2 100644
--- a/packages/react/src/components/field-container/field-container.tsx
+++ b/packages/react/src/components/field-container/field-container.tsx
@@ -1,34 +1,14 @@
 import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
-import styled from 'styled-components';
+import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useId } from '../../hooks/use-id';
 import { FieldControlContext } from './context';
 import { InvalidFieldMessage } from '../feedbacks/invalid-field-message';
 import { Label } from '../label/label';
 import { Hint } from '../hint/hint';
+import { StyledDiv } from './styled';
 import { FieldContainerProps } from './types';
 import { getAriaDescribedby, getAriaLabel, getAriaLabelledby, getSlotIds } from './utils';
 
-interface StyledDivProps {
-    $hasLabel: boolean;
-    $hasHint: boolean;
-    $valid: boolean;
-    $noMargin?: boolean;
-}
-
-const StyledDiv = styled.div<StyledDivProps>`
-    margin: ${({ $noMargin }) => ($noMargin ? '0' : '0 0 var(--spacing-3x)')};
-
-    input,
-    select,
-    textarea {
-        border-color: ${({ theme, $valid }) => ($valid ? theme.component['field-input-border-color'] : theme.component['field-input-error-border-color'])};
-    }
-
-    > :nth-child(${({ $hasLabel, $hasHint, $valid }) => ($hasLabel ? 1 : 0) + ($hasHint ? 1 : 0) + (!$valid ? 1 : 0)}) {
-        margin-bottom: var(--spacing-half);
-    }
-`;
-
 export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerProps>> = ({
     id: providedId,
     ariaLabel: providedAriaLabel,
@@ -45,8 +25,9 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
     tooltip,
     valid = true,
     validationErrorMessage,
-    ...props
+    ...otherProps
 }) => {
+    const dataAttributes = useDataAttributes(otherProps);
     const fieldId = useId(providedId);
 
     const slotIds = getSlotIds(fieldId, label, hint, (validationErrorMessage && !valid));
@@ -74,7 +55,8 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
                 $hasLabel={!!label}
                 $hasHint={!!hint}
                 $valid={valid}
-                {...props /* eslint-disable-line react/jsx-props-no-spreading */}
+                {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
+                {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
             >
                 {label && <Label tooltip={tooltip}>{label}</Label>}
                 {hint && <Hint>{hint}</Hint>}
diff --git a/packages/react/src/components/field-container/styled.ts b/packages/react/src/components/field-container/styled.ts
new file mode 100644
index 0000000000..1d2908c94a
--- /dev/null
+++ b/packages/react/src/components/field-container/styled.ts
@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+interface StyledDivProps {
+    $hasLabel: boolean;
+    $hasHint: boolean;
+    $valid: boolean;
+    $noMargin?: boolean;
+}
+
+export const StyledDiv = styled.div<StyledDivProps>`
+    margin: ${({ $noMargin }) => ($noMargin ? '0' : '0 0 var(--spacing-3x)')};
+
+    input,
+    select,
+    textarea {
+        border-color: ${({ theme, $valid }) => ($valid ? theme.component['field-input-border-color'] : theme.component['field-input-error-border-color'])};
+    }
+
+    > :nth-child(${({ $hasLabel, $hasHint, $valid }) => ($hasLabel ? 1 : 0) + ($hasHint ? 1 : 0) + (!$valid ? 1 : 0)}) {
+        margin-bottom: var(--spacing-half);
+    }
+`;
diff --git a/packages/react/src/components/hint/hint.tsx b/packages/react/src/components/hint/hint.tsx
index 1f45c40226..eb6c87417d 100644
--- a/packages/react/src/components/hint/hint.tsx
+++ b/packages/react/src/components/hint/hint.tsx
@@ -1,20 +1,11 @@
 import { forwardRef, PropsWithChildren, ReactElement, Ref } from 'react';
-import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useId } from '../../hooks/use-id';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { useFieldControlContext } from '../field-container/context';
+import { StyledHint } from './styled';
 import { HintProps } from './types';
 
-const StyledHint = styled.span<{ $isMobile: boolean }>`
-    color: ${(props) => props.theme.component['field-hint-text-color']};
-    display: block;
-    font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
-    font-weight: var(--font-normal);
-    letter-spacing: 0.02rem;
-    line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
-`;
-
 export const Hint = forwardRef(({
     children,
     id: providedId,
diff --git a/packages/react/src/components/hint/styled.ts b/packages/react/src/components/hint/styled.ts
new file mode 100644
index 0000000000..6076e8e2cf
--- /dev/null
+++ b/packages/react/src/components/hint/styled.ts
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const StyledHint = styled.span<{ $isMobile: boolean }>`
+    color: ${(props) => props.theme.component['field-hint-text-color']};
+    display: block;
+    font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
+    font-weight: var(--font-normal);
+    letter-spacing: 0.02rem;
+    line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
+`;
diff --git a/packages/react/src/components/label/label.tsx b/packages/react/src/components/label/label.tsx
index a3a82c00de..0ee7bfdcfb 100644
--- a/packages/react/src/components/label/label.tsx
+++ b/packages/react/src/components/label/label.tsx
@@ -1,37 +1,12 @@
 import { forwardRef, Fragment, FunctionComponent, PropsWithChildren, ReactElement, Ref } from 'react';
-import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useId } from '../../hooks/use-id';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { useFieldControlContext } from '../field-container/context';
-import { Tooltip } from '../tooltip/tooltip';
 import { useTranslation } from '../../i18n/use-translation';
+import { StyledLabel, StyledTooltip, StyledWrapper } from './styled';
 import { LabelProps, RequiredLabelProps } from './types';
 
-const StyledWrapper = styled.div`
-    align-items: center;
-    display: flex;
-`;
-
-const StyledLabel = styled.label<{$isMobile: boolean}>`
-    color: ${(props) => props.theme.component['label-text-color']};
-    display: block;
-    font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
-    font-weight: var(--font-normal);
-    letter-spacing: 0.02rem;
-    line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
-    margin: 0;
-    width: fit-content;
-
-    input + & {
-        margin-left: var(--spacing-half);
-    }
-`;
-
-const StyledTooltip = styled(Tooltip)`
-    margin-left: calc(var(--spacing-1x) * 1.5);
-`;
-
 const RequiredLabel: FunctionComponent<RequiredLabelProps> = ({ type }) => {
     const { t } = useTranslation('text-input');
 
diff --git a/packages/react/src/components/label/styled.ts b/packages/react/src/components/label/styled.ts
new file mode 100644
index 0000000000..1892b9935c
--- /dev/null
+++ b/packages/react/src/components/label/styled.ts
@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { Tooltip } from '../tooltip/tooltip';
+
+export const StyledWrapper = styled.div`
+    align-items: center;
+    display: flex;
+`;
+
+export const StyledLabel = styled.label<{ $isMobile: boolean }>`
+    color: ${(props) => props.theme.component['label-text-color']};
+    display: block;
+    font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
+    font-weight: var(--font-normal);
+    letter-spacing: 0.02rem;
+    line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
+    margin: 0;
+    width: fit-content;
+
+    input + & {
+        margin-left: var(--spacing-half);
+    }
+`;
+
+export const StyledTooltip = styled(Tooltip)`
+    margin-left: calc(var(--spacing-1x) * 1.5);
+`;

From 238c6568686c322c3a77ecc513b409d418da9738 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Tue, 3 Dec 2024 09:10:37 -0500
Subject: [PATCH 21/23] chore(form-field): post master merge

---
 .../combobox/combobox.test.tsx.snap           | 16 ++--
 .../date-picker/date-picker.test.tsx.snap     | 74 +++++++++----------
 .../dropdown-list/dropdown-list.test.tsx.snap | 22 +++---
 .../field-container/field-container.test.tsx  | 26 +++----
 .../field-container/field-container.tsx       |  2 +-
 .../src/components/field-container/types.ts   |  9 ++-
 .../numeric-input/numeric-input.test.tsx.snap |  2 +-
 .../password-input.test.tsx.snap              | 20 ++---
 .../components/slider/slider.test.tsx.snap    | 12 +--
 .../stepper-input/stepper-input.test.tsx.snap | 18 ++---
 .../text-area/text-area.test.tsx.snap         |  8 +-
 .../text-input/text-input.test.tsx.snap       | 24 +++---
 packages/react/src/types/native-props.ts      |  2 +
 13 files changed, 121 insertions(+), 114 deletions(-)

diff --git a/packages/react/src/components/combobox/combobox.test.tsx.snap b/packages/react/src/components/combobox/combobox.test.tsx.snap
index 07a0e6b8ea..335da1b083 100644
--- a/packages/react/src/components/combobox/combobox.test.tsx.snap
+++ b/packages/react/src/components/combobox/combobox.test.tsx.snap
@@ -267,8 +267,8 @@ input + .c2 {
   <label
     class="c2 c3"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Select an option
   </label>
@@ -772,15 +772,15 @@ input + .c2 {
   <label
     class="c2 c3"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Select an option
   </label>
   <span
     class="c4"
     data-testid="invalid-field"
-    id="uuid2_invalid"
+    id="uuid1_invalid"
   >
     <svg
       class="c5"
@@ -1725,15 +1725,15 @@ input + .c2 {
   <label
     class="c2 c3"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Select an option
   </label>
   <span
     class="c4"
     data-testid="field-hint"
-    id="uuid2_hint"
+    id="uuid1_hint"
   >
     Hint
   </span>
diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
index f49107a729..b53ed60d87 100644
--- a/packages/react/src/components/date-picker/date-picker.test.tsx.snap
+++ b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -351,8 +351,8 @@ label + .c3 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     date
   </label>
@@ -742,8 +742,8 @@ label + .c3 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     date
   </label>
@@ -1135,8 +1135,8 @@ label + .c3 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     date
   </label>
@@ -1528,8 +1528,8 @@ label + .c3 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     date
   </label>
@@ -1949,15 +1949,15 @@ label + .c5 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     date
   </label>
   <span
     class="c3"
     data-testid="invalid-field"
-    id="uuid2_invalid"
+    id="uuid1_invalid"
   >
     <svg
       class="c4"
@@ -2356,8 +2356,8 @@ label + .c3 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     date
   </label>
@@ -2915,8 +2915,8 @@ label + .c3 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     date
   </label>
@@ -3001,15 +3001,15 @@ label + .c3 {
                         class="c12 c13"
                       >
                         <div
-                          aria-controls="uuid3_listbox"
+                          aria-controls="uuid2_listbox"
                           aria-expanded="false"
                           aria-invalid="false"
                           aria-label="Select a month"
-                          aria-labelledby="uuid3_label uuid3_listbox_october_label"
+                          aria-labelledby="uuid2_label uuid2_listbox_october_label"
                           aria-required="false"
                           class="c14"
                           data-testid="month-select"
-                          id="uuid3"
+                          id="uuid2"
                           role="combobox"
                           tabindex="0"
                           value="october"
@@ -3043,15 +3043,15 @@ label + .c3 {
                         class="c12 c13"
                       >
                         <div
-                          aria-controls="uuid5_listbox"
+                          aria-controls="uuid3_listbox"
                           aria-expanded="false"
                           aria-invalid="false"
                           aria-label="Select a year"
-                          aria-labelledby="uuid5_label uuid5_listbox_2010_label"
+                          aria-labelledby="uuid3_label uuid3_listbox_2010_label"
                           aria-required="false"
                           class="c14"
                           data-testid="year-select"
-                          id="uuid5"
+                          id="uuid3"
                           role="combobox"
                           tabindex="0"
                           value="2010"
@@ -4217,8 +4217,8 @@ label + .c3 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     date
   </label>
@@ -4303,15 +4303,15 @@ label + .c3 {
                         class="c12 c13"
                       >
                         <div
-                          aria-controls="uuid3_listbox"
+                          aria-controls="uuid2_listbox"
                           aria-expanded="false"
                           aria-invalid="false"
                           aria-label="Select a month"
-                          aria-labelledby="uuid3_label uuid3_listbox_october_label"
+                          aria-labelledby="uuid2_label uuid2_listbox_october_label"
                           aria-required="false"
                           class="c14"
                           data-testid="month-select"
-                          id="uuid3"
+                          id="uuid2"
                           role="combobox"
                           tabindex="0"
                           value="october"
@@ -4345,15 +4345,15 @@ label + .c3 {
                         class="c12 c13"
                       >
                         <div
-                          aria-controls="uuid5_listbox"
+                          aria-controls="uuid3_listbox"
                           aria-expanded="false"
                           aria-invalid="false"
                           aria-label="Select a year"
-                          aria-labelledby="uuid5_label uuid5_listbox_2010_label"
+                          aria-labelledby="uuid3_label uuid3_listbox_2010_label"
                           aria-required="false"
                           class="c14"
                           data-testid="year-select"
-                          id="uuid5"
+                          id="uuid3"
                           role="combobox"
                           tabindex="0"
                           value="2010"
@@ -5494,8 +5494,8 @@ label + .c3 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     date
   </label>
@@ -5576,15 +5576,15 @@ label + .c3 {
                           class="c12 c13"
                         >
                           <div
-                            aria-controls="uuid3_listbox"
+                            aria-controls="uuid2_listbox"
                             aria-expanded="false"
                             aria-invalid="false"
                             aria-label="Select a month"
-                            aria-labelledby="uuid3_label uuid3_listbox_october_label"
+                            aria-labelledby="uuid2_label uuid2_listbox_october_label"
                             aria-required="false"
                             class="c14"
                             data-testid="month-select"
-                            id="uuid3"
+                            id="uuid2"
                             role="combobox"
                             tabindex="0"
                             value="october"
@@ -5618,15 +5618,15 @@ label + .c3 {
                           class="c12 c13"
                         >
                           <div
-                            aria-controls="uuid5_listbox"
+                            aria-controls="uuid3_listbox"
                             aria-expanded="false"
                             aria-invalid="false"
                             aria-label="Select a year"
-                            aria-labelledby="uuid5_label uuid5_listbox_2010_label"
+                            aria-labelledby="uuid3_label uuid3_listbox_2010_label"
                             aria-required="false"
                             class="c14"
                             data-testid="year-select"
-                            id="uuid5"
+                            id="uuid3"
                             role="combobox"
                             tabindex="0"
                             value="2010"
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
index 988e209724..a0900523d3 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
+++ b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
@@ -218,8 +218,8 @@ input + .c2 {
   <label
     class="c2 c3"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Select an option
   </label>
@@ -667,15 +667,15 @@ input + .c2 {
   <label
     class="c2 c3"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Select an option
   </label>
   <span
     class="c4"
     data-testid="field-hint"
-    id="uuid2_hint"
+    id="uuid1_hint"
   >
     Hint
   </span>
@@ -1142,15 +1142,15 @@ input + .c2 {
   <label
     class="c2 c3"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Select an option
   </label>
   <span
     class="c4"
     data-testid="invalid-field"
-    id="uuid2_invalid"
+    id="uuid1_invalid"
   >
     <svg
       class="c5"
@@ -2565,15 +2565,15 @@ input + .c2 {
   <label
     class="c2 c3"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Select an option
   </label>
   <span
     class="c4"
     data-testid="field-hint"
-    id="uuid2_hint"
+    id="uuid1_hint"
   >
     Hint
   </span>
diff --git a/packages/react/src/components/field-container/field-container.test.tsx b/packages/react/src/components/field-container/field-container.test.tsx
index 3fa6627166..1bf0ee47ab 100644
--- a/packages/react/src/components/field-container/field-container.test.tsx
+++ b/packages/react/src/components/field-container/field-container.test.tsx
@@ -15,7 +15,7 @@ import { FieldContainer } from './field-container';
 describe('Field Container', () => {
     describe('Styling', () => {
         const defaultProps = {
-            id: 'id',
+            fieldId: 'id',
             validationErrorMessage: 'This text area input is invalid',
         };
 
@@ -62,7 +62,7 @@ describe('Field Container', () => {
             const consoleSpy = jest.spyOn(devConsole, 'warn');
             consoleSpy.mockImplementation(() => {});
             const wrapper = renderWithProviders(
-                <FieldContainer id={providedId} validationErrorMessage={invalidMessage}>
+                <FieldContainer fieldId={providedId} validationErrorMessage={invalidMessage}>
                     <Input />
                 </FieldContainer>,
             );
@@ -85,7 +85,7 @@ describe('Field Container', () => {
                     ariaLabelledby={additionalElementId}
                     ariaDescribedby={additionalElementId}
                     label={label}
-                    id={providedId}
+                    fieldId={providedId}
                     hint={hint}
                     validationErrorMessage={invalidMessage}
                 >
@@ -111,7 +111,7 @@ describe('Field Container', () => {
                     ariaLabelledby={`${additionalElementId}_Parent`}
                     ariaDescribedby={`${additionalElementId}_Parent`}
                     label={label}
-                    id={providedId}
+                    fieldId={providedId}
                     hint={hint}
                     validationErrorMessage={invalidMessage}
                 >
@@ -140,7 +140,7 @@ describe('Field Container', () => {
                     <FieldContainer
                         ariaLabel={ariaLabel}
                         label={label}
-                        id={providedId}
+                        fieldId={providedId}
                         validationErrorMessage={invalidMessage}
                     >
                         <Input />
@@ -162,7 +162,7 @@ describe('Field Container', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
-                    <FieldContainer label={label} id={providedId} validationErrorMessage={invalidMessage}>
+                    <FieldContainer label={label} fieldId={providedId} validationErrorMessage={invalidMessage}>
                         <Input />
                     </FieldContainer>,
                 );
@@ -180,7 +180,7 @@ describe('Field Container', () => {
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
                     <FieldContainer
-                        id={providedId}
+                        fieldId={providedId}
                         validationErrorMessage=""
                         ariaLabelledby={additionalElementId}
                     >
@@ -202,7 +202,7 @@ describe('Field Container', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
-                    <FieldContainer label={label} hint={hint} id={providedId} validationErrorMessage="">
+                    <FieldContainer label={label} hint={hint} fieldId={providedId} validationErrorMessage="">
                         <Input />
                     </FieldContainer>,
                 );
@@ -219,7 +219,7 @@ describe('Field Container', () => {
                 const consoleSpy = jest.spyOn(devConsole, 'warn');
                 consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
-                    <FieldContainer label={label} id={providedId} validationErrorMessage={invalidMessage}>
+                    <FieldContainer label={label} fieldId={providedId} validationErrorMessage={invalidMessage}>
                         <Input />
                     </FieldContainer>,
                 );
@@ -238,7 +238,7 @@ describe('Field Container', () => {
                 const wrapper = renderWithProviders(
                     <FieldContainer
                         label={label}
-                        id={providedId}
+                        fieldId={providedId}
                         valid={false}
                         validationErrorMessage={invalidMessage}
                     >
@@ -260,7 +260,7 @@ describe('Field Container', () => {
                 const wrapper = renderWithProviders(
                     <FieldContainer
                         label={label}
-                        id={providedId}
+                        fieldId={providedId}
                         hint={hint}
                         validationErrorMessage=""
                         ariaDescribedby={additionalElementId}
@@ -284,7 +284,7 @@ describe('Field Container', () => {
                     <FieldContainer
                         label={label}
                         hint={hint}
-                        id={providedId}
+                        fieldId={providedId}
                         valid={false}
                         validationErrorMessage=""
                     >
@@ -300,7 +300,7 @@ describe('Field Container', () => {
         describe('aria-disabled', () => {
             test('should be true when FieldContainer is disabled', () => {
                 const wrapper = renderWithProviders(
-                    <FieldContainer label={label} hint={hint} id={providedId} disabled validationErrorMessage="">
+                    <FieldContainer label={label} hint={hint} fieldId={providedId} disabled validationErrorMessage="">
                         <Input />
                     </FieldContainer>,
                 );
diff --git a/packages/react/src/components/field-container/field-container.tsx b/packages/react/src/components/field-container/field-container.tsx
index 019d3b85b2..a8462a9c7a 100644
--- a/packages/react/src/components/field-container/field-container.tsx
+++ b/packages/react/src/components/field-container/field-container.tsx
@@ -10,7 +10,7 @@ import { FieldContainerProps } from './types';
 import { getAriaDescribedby, getAriaLabel, getAriaLabelledby, getSlotIds } from './utils';
 
 export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerProps>> = ({
-    id: providedId,
+    fieldId: providedId,
     ariaLabel: providedAriaLabel,
     ariaLabelledby: providedAriaLabelledby,
     ariaDescribedby: providedAriaDescribedby,
diff --git a/packages/react/src/components/field-container/types.ts b/packages/react/src/components/field-container/types.ts
index 4f1fc6fe9b..24154e4a5c 100644
--- a/packages/react/src/components/field-container/types.ts
+++ b/packages/react/src/components/field-container/types.ts
@@ -1,3 +1,4 @@
+import { NativeDivProps } from '../../types/native-props';
 import { TooltipProps } from '../tooltip/tooltip';
 
 export interface FieldSlotIds {
@@ -17,9 +18,13 @@ export interface FieldControlProps {
     slotIds?: FieldSlotIds;
 }
 
-export interface FieldContainerProps extends FieldControlProps {
+type PartialNativeDivProps = Omit<NativeDivProps, 'id' | 'ref'>;
+
+export interface FieldContainerProps extends
+    Omit<FieldControlProps, 'id' | 'slotIds'>,
+    PartialNativeDivProps
+{
     fieldId?: string;
-    className?: string;
     noMargin?: boolean;
     label?: string;
     hint?: string;
diff --git a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
index f567edcc14..4647994106 100644
--- a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
+++ b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
@@ -351,7 +351,7 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
   <span
     class="c2"
     data-testid="invalid-field"
-    id="uuid2_invalid"
+    id="uuid1_invalid"
   >
     <svg
       class="c3"
diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index c713d092f7..9c3998aeb9 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -377,10 +377,10 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
       class="c3"
     >
       <span
-        aria-describedby="uuid3"
+        aria-describedby="uuid2"
         class="c4"
         data-testid="tooltip"
-        id="tooltip-trigger-uuid3"
+        id="tooltip-trigger-uuid2"
         tabindex="-1"
       >
         <button
@@ -405,7 +405,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
         class="c7"
         data-popper-interactive="false"
         data-testid="tooltip-content-container"
-        id="uuid3"
+        id="uuid2"
         role="tooltip"
         style="position:absolute;left:0;top:0"
       >
@@ -813,7 +813,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   <span
     class="c1"
     data-testid="invalid-field"
-    id="uuid2_invalid"
+    id="uuid1_invalid"
   >
     <svg
       class="c2"
@@ -841,10 +841,10 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
       class="c5"
     >
       <span
-        aria-describedby="uuid3"
+        aria-describedby="uuid2"
         class="c6"
         data-testid="tooltip"
-        id="tooltip-trigger-uuid3"
+        id="tooltip-trigger-uuid2"
         tabindex="-1"
       >
         <button
@@ -868,7 +868,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
         class="c9"
         data-popper-interactive="false"
         data-testid="tooltip-content-container"
-        id="uuid3"
+        id="uuid2"
         role="tooltip"
         style="position:absolute;left:0;top:0"
       >
@@ -1264,10 +1264,10 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
       class="c3"
     >
       <span
-        aria-describedby="uuid3"
+        aria-describedby="uuid2"
         class="c4"
         data-testid="tooltip"
-        id="tooltip-trigger-uuid3"
+        id="tooltip-trigger-uuid2"
         tabindex="-1"
       >
         <button
@@ -1291,7 +1291,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
         class="c7"
         data-popper-interactive="false"
         data-testid="tooltip-content-container"
-        id="uuid3"
+        id="uuid2"
         role="tooltip"
         style="position:absolute;left:0;top:0"
       >
diff --git a/packages/react/src/components/slider/slider.test.tsx.snap b/packages/react/src/components/slider/slider.test.tsx.snap
index 470b6f94c7..99bf132ad5 100644
--- a/packages/react/src/components/slider/slider.test.tsx.snap
+++ b/packages/react/src/components/slider/slider.test.tsx.snap
@@ -237,8 +237,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Label
   </label>
@@ -558,8 +558,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Label
   </label>
@@ -854,8 +854,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Label
   </label>
diff --git a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
index 08d2407d92..18193ffaa0 100644
--- a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
+++ b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
@@ -255,8 +255,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     test
   </label>
@@ -593,15 +593,15 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     test
   </label>
   <span
     class="c3"
     data-testid="invalid-field"
-    id="uuid2_invalid"
+    id="uuid1_invalid"
   >
     <svg
       class="c4"
@@ -798,8 +798,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     test
   </label>
@@ -1073,8 +1073,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     test
   </label>
diff --git a/packages/react/src/components/text-area/text-area.test.tsx.snap b/packages/react/src/components/text-area/text-area.test.tsx.snap
index 3b6c22fa32..1186b29d34 100644
--- a/packages/react/src/components/text-area/text-area.test.tsx.snap
+++ b/packages/react/src/components/text-area/text-area.test.tsx.snap
@@ -120,8 +120,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid3"
-    id="uuid3_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Comment (required)
   </label>
@@ -258,8 +258,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid3"
-    id="uuid3_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Comment (required)
   </label>
diff --git a/packages/react/src/components/text-input/text-input.test.tsx.snap b/packages/react/src/components/text-input/text-input.test.tsx.snap
index 15072da459..3fc5c5f076 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx.snap
+++ b/packages/react/src/components/text-input/text-input.test.tsx.snap
@@ -140,8 +140,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Telephone
   </label>
@@ -300,8 +300,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Telephone (required)
   </label>
@@ -460,8 +460,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Telephone
   </label>
@@ -642,8 +642,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Telephone
   </label>
@@ -834,8 +834,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Telephone
   </label>
@@ -1025,8 +1025,8 @@ input + .c1 {
   <label
     class="c1 c2"
     data-testid="field-label"
-    for="uuid2"
-    id="uuid2_label"
+    for="uuid1"
+    id="uuid1_label"
   >
     Telephone
   </label>
diff --git a/packages/react/src/types/native-props.ts b/packages/react/src/types/native-props.ts
index aa3681f793..f2df875326 100644
--- a/packages/react/src/types/native-props.ts
+++ b/packages/react/src/types/native-props.ts
@@ -5,3 +5,5 @@ export type NativeInputProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputEl
 export type NativeSpanProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
 
 export type NativeLabelProps = DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+
+export type NativeDivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

From f990d0caecb438056e3b5e027ba7b9e3f5e404c3 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Tue, 3 Dec 2024 09:16:04 -0500
Subject: [PATCH 22/23] chore(form-field): post master merge

---
 packages/react/src/components/combobox/combobox.test.tsx.snap   | 2 ++
 .../react/src/components/date-picker/date-picker.test.tsx.snap  | 2 ++
 .../src/components/dropdown-list/dropdown-list.test.tsx.snap    | 2 ++
 .../components/feedbacks/invalid-field-message.test.tsx.snap    | 2 ++
 .../react/src/components/feedbacks/invalid-field-message.tsx    | 2 ++
 .../components/field-container/field-container.test.tsx.snap    | 2 ++
 .../src/components/numeric-input/numeric-input.test.tsx.snap    | 2 ++
 .../src/components/password-input/password-input.test.tsx.snap  | 2 ++
 .../src/components/stepper-input/stepper-input.test.tsx.snap    | 2 ++
 9 files changed, 18 insertions(+)

diff --git a/packages/react/src/components/combobox/combobox.test.tsx.snap b/packages/react/src/components/combobox/combobox.test.tsx.snap
index 335da1b083..39a39d1e88 100644
--- a/packages/react/src/components/combobox/combobox.test.tsx.snap
+++ b/packages/react/src/components/combobox/combobox.test.tsx.snap
@@ -778,9 +778,11 @@ input + .c2 {
     Select an option
   </label>
   <span
+    aria-live="polite"
     class="c4"
     data-testid="invalid-field"
     id="uuid1_invalid"
+    role="alert"
   >
     <svg
       class="c5"
diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
index b53ed60d87..e694998ff5 100644
--- a/packages/react/src/components/date-picker/date-picker.test.tsx.snap
+++ b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -1955,9 +1955,11 @@ label + .c5 {
     date
   </label>
   <span
+    aria-live="polite"
     class="c3"
     data-testid="invalid-field"
     id="uuid1_invalid"
+    role="alert"
   >
     <svg
       class="c4"
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
index a0900523d3..43941bce0b 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
+++ b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
@@ -1148,9 +1148,11 @@ input + .c2 {
     Select an option
   </label>
   <span
+    aria-live="polite"
     class="c4"
     data-testid="invalid-field"
     id="uuid1_invalid"
+    role="alert"
   >
     <svg
       class="c5"
diff --git a/packages/react/src/components/feedbacks/invalid-field-message.test.tsx.snap b/packages/react/src/components/feedbacks/invalid-field-message.test.tsx.snap
index aa125747a0..e4d6ab8723 100644
--- a/packages/react/src/components/feedbacks/invalid-field-message.test.tsx.snap
+++ b/packages/react/src/components/feedbacks/invalid-field-message.test.tsx.snap
@@ -28,9 +28,11 @@ exports[`Invalid field Matches the snapshot 1`] = `
 }
 
 <span
+  aria-live="polite"
   class="c0"
   data-testid="invalid-field"
   id="test-id"
+  role="alert"
 >
   <svg
     class="c1"
diff --git a/packages/react/src/components/feedbacks/invalid-field-message.tsx b/packages/react/src/components/feedbacks/invalid-field-message.tsx
index 0e364346b5..5d7a6284c5 100644
--- a/packages/react/src/components/feedbacks/invalid-field-message.tsx
+++ b/packages/react/src/components/feedbacks/invalid-field-message.tsx
@@ -20,8 +20,10 @@ export const InvalidFieldMessage = forwardRef(({
     return (
         <StyledValidationMessage
             data-testid="invalid-field"
+            aria-live="polite"
             id={id}
             ref={ref}
+            role="alert"
             $isMobile={isMobile}
             {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
             {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
diff --git a/packages/react/src/components/field-container/field-container.test.tsx.snap b/packages/react/src/components/field-container/field-container.test.tsx.snap
index 8ee811e7dc..b4dd3624d1 100644
--- a/packages/react/src/components/field-container/field-container.test.tsx.snap
+++ b/packages/react/src/components/field-container/field-container.test.tsx.snap
@@ -89,9 +89,11 @@ exports[`Field Container Styling matches invalid snapshot 1`] = `
   class="c0"
 >
   <span
+    aria-live="polite"
     class="c1"
     data-testid="invalid-field"
     id="id_invalid"
+    role="alert"
   >
     <svg
       class="c2"
diff --git a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
index 4647994106..11c23fc00a 100644
--- a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
+++ b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
@@ -349,9 +349,11 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
   data-testid="field-container"
 >
   <span
+    aria-live="polite"
     class="c2"
     data-testid="invalid-field"
     id="uuid1_invalid"
+    role="alert"
   >
     <svg
       class="c3"
diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index 9c3998aeb9..69c406502f 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -811,9 +811,11 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   class="c0"
 >
   <span
+    aria-live="polite"
     class="c1"
     data-testid="invalid-field"
     id="uuid1_invalid"
+    role="alert"
   >
     <svg
       class="c2"
diff --git a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
index 18193ffaa0..078c603763 100644
--- a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
+++ b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
@@ -599,9 +599,11 @@ input + .c1 {
     test
   </label>
   <span
+    aria-live="polite"
     class="c3"
     data-testid="invalid-field"
     id="uuid1_invalid"
+    role="alert"
   >
     <svg
       class="c4"

From 88891eb4271bcf5ae280214a2a9f066c04e76c56 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Tue, 3 Dec 2024 10:38:34 -0500
Subject: [PATCH 23/23] chore(form-field): post review changes

---
 .../src/components/combobox/combobox.tsx      |   2 +-
 .../components/date-picker/date-picker.tsx    |   2 +-
 .../dropdown-list/dropdown-list.tsx           |   2 +-
 .../feedbacks/invalid-field-message.test.tsx  |  14 -
 .../invalid-field-message.test.tsx.snap       |  46 --
 .../react/src/components/feedbacks/types.ts   |   8 -
 .../src/components/field-container/context.ts |  13 -
 .../field-container.test.tsx.snap             | 109 -----
 .../src/components/field-container/types.ts   |  34 --
 packages/react/src/components/hint/types.ts   |   5 -
 packages/react/src/components/label/types.ts  |  15 -
 .../password-creation-input.tsx               |   2 +-
 .../password-input/password-input.tsx         |   2 +-
 .../src/components/search/search-input.tsx    |   2 +-
 .../react/src/components/slider/slider.tsx    |   2 +-
 .../stepper-input/stepper-input.tsx           |   2 +-
 .../src/components/text-area/text-area.tsx    |   2 +-
 .../src/components/text-input/text-input.tsx  |   2 +-
 .../field/container}/field-container.test.tsx | 160 ++-----
 .../container/field-container.test.tsx.snap   | 319 +++++++++++++
 .../field/container}/field-container.tsx      |  22 +-
 .../src/internal/field/container/index.ts     |   2 +
 .../field/container}/styled.ts                |   0
 .../src/internal/field/container/types.ts     |  29 ++
 .../internal/field/container/utils.test.ts    |  99 ++++
 .../field/container}/utils.ts                 |  17 +-
 packages/react/src/internal/field/context.ts  |  29 ++
 .../src/internal/field/hint/hint.test.tsx     |  33 ++
 .../internal/field/hint/hint.test.tsx.snap    | 227 +++++++++
 .../field}/hint/hint.tsx                      |  10 +-
 .../react/src/internal/field/hint/index.ts    |   1 +
 .../field}/hint/styled.ts                     |   0
 .../react/src/internal/field/hint/types.ts    |   5 +
 .../field/validation-message/index.ts         |   1 +
 .../field/validation-message}/styled.ts       |   2 +-
 .../field/validation-message/types.ts         |   7 +
 .../validation-message.test.tsx               |  55 +++
 .../validation-message.test.tsx.snap          | 442 ++++++++++++++++++
 .../validation-message.tsx}                   |  18 +-
 packages/react/src/internal/input/index.ts    |   1 +
 packages/react/src/internal/input/input.tsx   |  49 ++
 .../input.tsx => internal/input/styled.ts}    |  47 +-
 .../{components => internal}/input/types.ts   |   2 +-
 packages/react/src/internal/label/index.ts    |   1 +
 .../label/label.test.tsx                      |   2 +-
 .../label/label.test.tsx.snap                 |   0
 .../{components => internal}/label/label.tsx  |  29 +-
 .../{components => internal}/label/styled.ts  |   2 +-
 packages/react/src/internal/label/types.ts    |   9 +
 packages/react/src/types/native-props.ts      |  22 +-
 50 files changed, 1414 insertions(+), 492 deletions(-)
 delete mode 100644 packages/react/src/components/feedbacks/invalid-field-message.test.tsx
 delete mode 100644 packages/react/src/components/feedbacks/invalid-field-message.test.tsx.snap
 delete mode 100644 packages/react/src/components/feedbacks/types.ts
 delete mode 100644 packages/react/src/components/field-container/context.ts
 delete mode 100644 packages/react/src/components/field-container/field-container.test.tsx.snap
 delete mode 100644 packages/react/src/components/field-container/types.ts
 delete mode 100644 packages/react/src/components/hint/types.ts
 delete mode 100644 packages/react/src/components/label/types.ts
 rename packages/react/src/{components/field-container => internal/field/container}/field-container.test.tsx (65%)
 create mode 100644 packages/react/src/internal/field/container/field-container.test.tsx.snap
 rename packages/react/src/{components/field-container => internal/field/container}/field-container.tsx (76%)
 create mode 100644 packages/react/src/internal/field/container/index.ts
 rename packages/react/src/{components/field-container => internal/field/container}/styled.ts (100%)
 create mode 100644 packages/react/src/internal/field/container/types.ts
 create mode 100644 packages/react/src/internal/field/container/utils.test.ts
 rename packages/react/src/{components/field-container => internal/field/container}/utils.ts (76%)
 create mode 100644 packages/react/src/internal/field/context.ts
 create mode 100644 packages/react/src/internal/field/hint/hint.test.tsx
 create mode 100644 packages/react/src/internal/field/hint/hint.test.tsx.snap
 rename packages/react/src/{components => internal/field}/hint/hint.tsx (73%)
 create mode 100644 packages/react/src/internal/field/hint/index.ts
 rename packages/react/src/{components => internal/field}/hint/styled.ts (100%)
 create mode 100644 packages/react/src/internal/field/hint/types.ts
 create mode 100644 packages/react/src/internal/field/validation-message/index.ts
 rename packages/react/src/{components/feedbacks => internal/field/validation-message}/styled.ts (91%)
 create mode 100644 packages/react/src/internal/field/validation-message/types.ts
 create mode 100644 packages/react/src/internal/field/validation-message/validation-message.test.tsx
 create mode 100644 packages/react/src/internal/field/validation-message/validation-message.test.tsx.snap
 rename packages/react/src/{components/feedbacks/invalid-field-message.tsx => internal/field/validation-message/validation-message.tsx} (62%)
 create mode 100644 packages/react/src/internal/input/index.ts
 create mode 100644 packages/react/src/internal/input/input.tsx
 rename packages/react/src/{components/input/input.tsx => internal/input/styled.ts} (50%)
 rename packages/react/src/{components => internal}/input/types.ts (84%)
 create mode 100644 packages/react/src/internal/label/index.ts
 rename packages/react/src/{components => internal}/label/label.test.tsx (90%)
 rename packages/react/src/{components => internal}/label/label.test.tsx.snap (100%)
 rename packages/react/src/{components => internal}/label/label.tsx (75%)
 rename packages/react/src/{components => internal}/label/styled.ts (92%)
 create mode 100644 packages/react/src/internal/label/types.ts

diff --git a/packages/react/src/components/combobox/combobox.tsx b/packages/react/src/components/combobox/combobox.tsx
index 2bdc426d1c..b6de8f4d4e 100644
--- a/packages/react/src/components/combobox/combobox.tsx
+++ b/packages/react/src/components/combobox/combobox.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../../internal/field/container/field-container';
 import { IconButton } from '../buttons/icon-button';
 import { Listbox, ListboxOption } from '../listbox/listbox';
 import { TooltipProps } from '../tooltip/tooltip';
diff --git a/packages/react/src/components/date-picker/date-picker.tsx b/packages/react/src/components/date-picker/date-picker.tsx
index 57a8570f70..e4c97f95d5 100644
--- a/packages/react/src/components/date-picker/date-picker.tsx
+++ b/packages/react/src/components/date-picker/date-picker.tsx
@@ -26,7 +26,7 @@ import { v4 as uuid } from '../../utils/uuid';
 import { AbstractButton } from '../buttons/abstract/abstract-button';
 import { Button } from '../buttons/button';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../../internal/field/container/field-container';
 import { Icon } from '../icon/icon';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.tsx b/packages/react/src/components/dropdown-list/dropdown-list.tsx
index 093f092e6e..77737586f3 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.tsx
+++ b/packages/react/src/components/dropdown-list/dropdown-list.tsx
@@ -14,7 +14,7 @@ import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { isLetterOrNumber } from '../../utils/regex';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../../internal/field/container/field-container';
 import { Icon, IconName } from '../icon/icon';
 import { Listbox, ListboxOption } from '../listbox/listbox';
 import { TooltipProps } from '../tooltip/tooltip';
diff --git a/packages/react/src/components/feedbacks/invalid-field-message.test.tsx b/packages/react/src/components/feedbacks/invalid-field-message.test.tsx
deleted file mode 100644
index a8a22287f0..0000000000
--- a/packages/react/src/components/feedbacks/invalid-field-message.test.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { renderWithTheme } from '../../test-utils/renderer';
-import { InvalidFieldMessage } from './invalid-field-message';
-
-describe('Invalid field', () => {
-    test('Matches the snapshot', () => {
-        const tree = renderWithTheme(
-            <InvalidFieldMessage id="test-id">
-                Feedback Message
-            </InvalidFieldMessage>,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-});
diff --git a/packages/react/src/components/feedbacks/invalid-field-message.test.tsx.snap b/packages/react/src/components/feedbacks/invalid-field-message.test.tsx.snap
deleted file mode 100644
index e4d6ab8723..0000000000
--- a/packages/react/src/components/feedbacks/invalid-field-message.test.tsx.snap
+++ /dev/null
@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Invalid field Matches the snapshot 1`] = `
-.c0 {
-  color: #CD2C23;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-}
-
-.c1 {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-right: var(--spacing-base);
-}
-
-<span
-  aria-live="polite"
-  class="c0"
-  data-testid="invalid-field"
-  id="test-id"
-  role="alert"
->
-  <svg
-    class="c1"
-    color="currentColor"
-    focusable="false"
-    height="16"
-    width="16"
-  />
-  Feedback Message
-</span>
-`;
diff --git a/packages/react/src/components/feedbacks/types.ts b/packages/react/src/components/feedbacks/types.ts
deleted file mode 100644
index 1d11af5e1c..0000000000
--- a/packages/react/src/components/feedbacks/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { NativeSpanProps } from '../../types/native-props';
-import { FieldContainerProps } from '../field-container/types';
-
-type PartialNativeSpanProps = Omit<NativeSpanProps, 'ref'>;
-
-type CommonFieldContainerProps = Pick<FieldContainerProps, 'noInvalidFieldIcon'>;
-
-export interface InvalidFieldMessageProps extends PartialNativeSpanProps, CommonFieldContainerProps {}
diff --git a/packages/react/src/components/field-container/context.ts b/packages/react/src/components/field-container/context.ts
deleted file mode 100644
index 5b354e3468..0000000000
--- a/packages/react/src/components/field-container/context.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createContext, useContext } from 'react';
-import { FieldControlProps } from './types';
-
-export const FieldControlContext = createContext<FieldControlProps>({});
-
-export function useFieldControlContext(newContext: FieldControlProps): FieldControlProps {
-    const prevContext = useContext(FieldControlContext);
-
-    return {
-        ...prevContext,
-        ...newContext,
-    };
-}
diff --git a/packages/react/src/components/field-container/field-container.test.tsx.snap b/packages/react/src/components/field-container/field-container.test.tsx.snap
deleted file mode 100644
index b4dd3624d1..0000000000
--- a/packages/react/src/components/field-container/field-container.test.tsx.snap
+++ /dev/null
@@ -1,109 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Field Container Styling match noMargin snapshot 1`] = `
-.c0 {
-  margin: 0;
-}
-
-.c0 input,
-.c0 select,
-.c0 textarea {
-  border-color: #60666E;
-}
-
-.c0 > :nth-child(0) {
-  margin-bottom: var(--spacing-half);
-}
-
-<div
-  class="c0"
->
-  Children
-</div>
-`;
-
-exports[`Field Container Styling matches default snapshot 1`] = `
-.c0 {
-  margin: 0 0 var(--spacing-3x);
-}
-
-.c0 input,
-.c0 select,
-.c0 textarea {
-  border-color: #60666E;
-}
-
-.c0 > :nth-child(0) {
-  margin-bottom: var(--spacing-half);
-}
-
-<div
-  class="c0"
->
-  Children
-</div>
-`;
-
-exports[`Field Container Styling matches invalid snapshot 1`] = `
-.c1 {
-  color: #CD2C23;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-}
-
-.c2 {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-right: var(--spacing-base);
-}
-
-.c0 {
-  margin: 0 0 var(--spacing-3x);
-}
-
-.c0 input,
-.c0 select,
-.c0 textarea {
-  border-color: #CD2C23;
-}
-
-.c0 > :nth-child(1) {
-  margin-bottom: var(--spacing-half);
-}
-
-<div
-  class="c0"
->
-  <span
-    aria-live="polite"
-    class="c1"
-    data-testid="invalid-field"
-    id="id_invalid"
-    role="alert"
-  >
-    <svg
-      class="c2"
-      color="currentColor"
-      focusable="false"
-      height="16"
-      width="16"
-    />
-    This text area input is invalid
-  </span>
-  Children
-</div>
-`;
diff --git a/packages/react/src/components/field-container/types.ts b/packages/react/src/components/field-container/types.ts
deleted file mode 100644
index 24154e4a5c..0000000000
--- a/packages/react/src/components/field-container/types.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { NativeDivProps } from '../../types/native-props';
-import { TooltipProps } from '../tooltip/tooltip';
-
-export interface FieldSlotIds {
-    label?: string;
-    hint?: string;
-    invalid?: string;
-}
-
-export interface FieldControlProps {
-    id?: string;
-    ariaLabel?: string;
-    ariaLabelledby?: string;
-    ariaDescribedby?: string
-    disabled?: boolean;
-    required?: boolean;
-    valid?: boolean;
-    slotIds?: FieldSlotIds;
-}
-
-type PartialNativeDivProps = Omit<NativeDivProps, 'id' | 'ref'>;
-
-export interface FieldContainerProps extends
-    Omit<FieldControlProps, 'id' | 'slotIds'>,
-    PartialNativeDivProps
-{
-    fieldId?: string;
-    noMargin?: boolean;
-    label?: string;
-    hint?: string;
-    validationErrorMessage: string;
-    noInvalidFieldIcon?: boolean;
-    tooltip?: TooltipProps;
-}
diff --git a/packages/react/src/components/hint/types.ts b/packages/react/src/components/hint/types.ts
deleted file mode 100644
index df2ff5c53f..0000000000
--- a/packages/react/src/components/hint/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { NativeSpanProps } from '../../types/native-props';
-
-type PartialNativeSpanProps = Omit<NativeSpanProps, 'ref'>
-
-export interface HintProps extends PartialNativeSpanProps {}
diff --git a/packages/react/src/components/label/types.ts b/packages/react/src/components/label/types.ts
deleted file mode 100644
index cceff0f4ed..0000000000
--- a/packages/react/src/components/label/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NativeLabelProps } from '../../types/native-props';
-import { FieldContainerProps } from '../field-container/types';
-
-type PartialNativeLabelProps = Omit<NativeLabelProps, 'ref'>;
-
-type CommonFieldContainerProps = Pick<FieldContainerProps, 'required' | 'tooltip'>;
-
-export interface LabelProps extends PartialNativeLabelProps, CommonFieldContainerProps {
-    forId?: string;
-    requiredLabelType?: 'text';
-}
-
-export interface RequiredLabelProps {
-    type?: LabelProps['requiredLabelType'];
-}
diff --git a/packages/react/src/components/password-creation-input/password-creation-input.tsx b/packages/react/src/components/password-creation-input/password-creation-input.tsx
index 86bcb8e333..12677bebbd 100644
--- a/packages/react/src/components/password-creation-input/password-creation-input.tsx
+++ b/packages/react/src/components/password-creation-input/password-creation-input.tsx
@@ -2,7 +2,7 @@ import { ChangeEvent, useState, VoidFunctionComponent, useMemo } from 'react';
 import styled from 'styled-components';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { IconButton } from '../buttons/icon-button';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../../internal/field/container/field-container';
 import { useTranslation } from '../../i18n/use-translation';
 import { Tooltip } from '../tooltip/tooltip';
 import { getPasswordStrength } from './password-strength';
diff --git a/packages/react/src/components/password-input/password-input.tsx b/packages/react/src/components/password-input/password-input.tsx
index 995f9eefdb..2f6173a179 100644
--- a/packages/react/src/components/password-input/password-input.tsx
+++ b/packages/react/src/components/password-input/password-input.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { v4 as uuid } from '../../utils/uuid';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../../internal/field/container/field-container';
 import { Tooltip } from '../tooltip/tooltip';
 import { inputsStyle } from '../text-input/styles/inputs';
 
diff --git a/packages/react/src/components/search/search-input.tsx b/packages/react/src/components/search/search-input.tsx
index 544cdcf0c6..9411c6f8b2 100644
--- a/packages/react/src/components/search/search-input.tsx
+++ b/packages/react/src/components/search/search-input.tsx
@@ -7,7 +7,7 @@ import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { v4 as uuid } from '../../utils/uuid';
 import { SearchButton } from '../buttons';
-import { Label } from '../label/label';
+import { Label } from '../../internal/label/label';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { VisuallyHidden } from '../visually-hidden/visuallyhidden';
 
diff --git a/packages/react/src/components/slider/slider.tsx b/packages/react/src/components/slider/slider.tsx
index b214455e22..960f8a6961 100644
--- a/packages/react/src/components/slider/slider.tsx
+++ b/packages/react/src/components/slider/slider.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 import { useTranslation } from '../../i18n/use-translation';
 import { TooltipProps } from '../tooltip/tooltip';
 import { useId } from '../../hooks/use-id';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../../internal/field/container/field-container';
 import { ValueTooltip } from './value-tooltip';
 import { Labels, SliderContainer, StyledSlider } from './styles';
 
diff --git a/packages/react/src/components/stepper-input/stepper-input.tsx b/packages/react/src/components/stepper-input/stepper-input.tsx
index 21b31ca64d..337caca337 100644
--- a/packages/react/src/components/stepper-input/stepper-input.tsx
+++ b/packages/react/src/components/stepper-input/stepper-input.tsx
@@ -15,7 +15,7 @@ import { useId } from '../../hooks/use-id';
 import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../../internal/field/container/field-container';
 import { responsiveInputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
 import { StepperButtons } from './stepper-buttons';
diff --git a/packages/react/src/components/text-area/text-area.tsx b/packages/react/src/components/text-area/text-area.tsx
index 1226ee7939..9d139a9079 100644
--- a/packages/react/src/components/text-area/text-area.tsx
+++ b/packages/react/src/components/text-area/text-area.tsx
@@ -12,7 +12,7 @@ import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useId } from '../../hooks/use-id';
 import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../../internal/field/container/field-container';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
 import { ScreenReaderOnlyText } from '../screen-reader-only-text/ScreenReaderOnlyText';
diff --git a/packages/react/src/components/text-input/text-input.tsx b/packages/react/src/components/text-input/text-input.tsx
index d2caaf6fb1..64b0284a2e 100644
--- a/packages/react/src/components/text-input/text-input.tsx
+++ b/packages/react/src/components/text-input/text-input.tsx
@@ -22,7 +22,7 @@ import styled, { css } from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../../internal/field/container';
 import { TooltipProps } from '../tooltip/tooltip';
 import { inputsStyle } from './styles/inputs';
 import { useAriaConditionalIds } from '../../hooks/use-aria-conditional-ids';
diff --git a/packages/react/src/components/field-container/field-container.test.tsx b/packages/react/src/internal/field/container/field-container.test.tsx
similarity index 65%
rename from packages/react/src/components/field-container/field-container.test.tsx
rename to packages/react/src/internal/field/container/field-container.test.tsx
index 1bf0ee47ab..18f27b3f37 100644
--- a/packages/react/src/components/field-container/field-container.test.tsx
+++ b/packages/react/src/internal/field/container/field-container.test.tsx
@@ -1,27 +1,24 @@
-import { renderWithProviders } from '../../test-utils/renderer';
-import { devConsole } from '../../utils/dev-console';
-import { Input } from '../input/input';
+import { renderWithProviders } from '../../../test-utils/renderer';
+import { devConsole } from '../../../utils/dev-console';
+import { Input } from '../../input';
+import { FieldContainerProps } from './types';
 import {
     ARIA_LABEL_WARNING,
-    getAriaDescribedby,
-    getAriaLabel,
-    getAriaLabelledby,
-    getSlotId,
-    getSlotIds,
-    validateAriaLabels,
 } from './utils';
 import { FieldContainer } from './field-container';
 
 describe('Field Container', () => {
     describe('Styling', () => {
-        const defaultProps = {
+        const props: FieldContainerProps = {
             fieldId: 'id',
+            label: 'This is a label.',
             validationErrorMessage: 'This text area input is invalid',
+            hint: 'This is a hint.',
         };
 
         test('matches default snapshot', () => {
             const tree = renderWithProviders(
-                <FieldContainer {...defaultProps}>
+                <FieldContainer {...props}>
                     Children
                 </FieldContainer>,
             );
@@ -31,7 +28,17 @@ describe('Field Container', () => {
 
         test('matches invalid snapshot', () => {
             const tree = renderWithProviders(
-                <FieldContainer {...defaultProps} valid={false}>
+                <FieldContainer {...props} valid={false}>
+                    Children
+                </FieldContainer>,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
+
+        test('match required snapshot', () => {
+            const tree = renderWithProviders(
+                <FieldContainer {...props} required>
                     Children
                 </FieldContainer>,
             );
@@ -41,7 +48,7 @@ describe('Field Container', () => {
 
         test('match noMargin snapshot', () => {
             const tree = renderWithProviders(
-                <FieldContainer noMargin {...defaultProps}>
+                <FieldContainer noMargin {...props}>
                     Children
                 </FieldContainer>,
             );
@@ -51,6 +58,12 @@ describe('Field Container', () => {
     });
 
     describe('Accessibility', () => {
+        let consoleSpy: jest.SpyInstance;
+        beforeEach(() => {
+            consoleSpy = jest.spyOn(devConsole, 'warn');
+            consoleSpy.mockImplementation(() => ({}));
+        });
+
         const label = 'This is a label.';
         const ariaLabel = 'This is a ariaLabel.';
         const providedId = 'id';
@@ -59,8 +72,6 @@ describe('Field Container', () => {
         const additionalElementId = 'idAdditionalElement';
 
         test('should log if one of label props is missing', () => {
-            const consoleSpy = jest.spyOn(devConsole, 'warn');
-            consoleSpy.mockImplementation(() => {});
             const wrapper = renderWithProviders(
                 <FieldContainer fieldId={providedId} validationErrorMessage={invalidMessage}>
                     <Input />
@@ -73,12 +84,9 @@ describe('Field Container', () => {
             expect(inputWrapper.prop('aria-describedby')).toBe(undefined);
             expect(consoleSpy).toHaveBeenCalledTimes(1);
             expect(consoleSpy).toHaveBeenCalledWith(ARIA_LABEL_WARNING);
-            consoleSpy.mockRestore();
         });
 
         test('should log if more than one label props is provided', () => {
-            const consoleSpy = jest.spyOn(devConsole, 'warn');
-            consoleSpy.mockImplementation(() => {});
             const wrapper = renderWithProviders(
                 <FieldContainer
                     ariaLabel={ariaLabel}
@@ -99,12 +107,9 @@ describe('Field Container', () => {
             expect(inputWrapper.prop('aria-describedby')).toBe(`${providedId}_hint ${additionalElementId}`);
             expect(consoleSpy).toHaveBeenCalledTimes(1);
             expect(consoleSpy).toHaveBeenCalledWith(ARIA_LABEL_WARNING);
-            consoleSpy.mockRestore();
         });
 
         test('should override parent label props if provided to child input', () => {
-            const consoleSpy = jest.spyOn(devConsole, 'warn');
-            consoleSpy.mockImplementation(() => {});
             const wrapper = renderWithProviders(
                 <FieldContainer
                     ariaLabel={`${ariaLabel}_Parent`}
@@ -129,13 +134,10 @@ describe('Field Container', () => {
             expect(inputWrapper.prop('aria-describedby')).toBe(`${additionalElementId}_Child`);
             expect(consoleSpy).toHaveBeenCalledTimes(1);
             expect(consoleSpy).toHaveBeenCalledWith(ARIA_LABEL_WARNING);
-            consoleSpy.mockRestore();
         });
 
         describe('aria-label', () => {
             test('should log when both label and ariaLabel are provided', () => {
-                const consoleSpy = jest.spyOn(devConsole, 'warn');
-                consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
                     <FieldContainer
                         ariaLabel={ariaLabel}
@@ -153,14 +155,11 @@ describe('Field Container', () => {
                 expect(inputWrapper.prop('aria-describedby')).toBe(undefined);
                 expect(consoleSpy).toHaveBeenCalledTimes(1);
                 expect(consoleSpy).toHaveBeenCalledWith(ARIA_LABEL_WARNING);
-                consoleSpy.mockRestore();
             });
         });
 
         describe('aria-labelledby', () => {
             test('should contain idLabel when label provided', () => {
-                const consoleSpy = jest.spyOn(devConsole, 'warn');
-                consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
                     <FieldContainer label={label} fieldId={providedId} validationErrorMessage={invalidMessage}>
                         <Input />
@@ -172,12 +171,9 @@ describe('Field Container', () => {
                 expect(inputWrapper.prop('aria-labelledby')).toBe(`${providedId}_label`);
                 expect(inputWrapper.prop('aria-describedby')).toBe(undefined);
                 expect(consoleSpy).toHaveBeenCalledTimes(0);
-                consoleSpy.mockRestore();
             });
 
             test('should contain idAdditionalElement when ariaLabelledby provided', () => {
-                const consoleSpy = jest.spyOn(devConsole, 'warn');
-                consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
                     <FieldContainer
                         fieldId={providedId}
@@ -193,14 +189,11 @@ describe('Field Container', () => {
                 expect(inputWrapper.prop('aria-labelledby')).toBe(`${additionalElementId}`);
                 expect(inputWrapper.prop('aria-describedby')).toBe(undefined);
                 expect(consoleSpy).toHaveBeenCalledTimes(0);
-                consoleSpy.mockRestore();
             });
         });
 
         describe('aria-describedby', () => {
             test('should contain idHint when hint provided', () => {
-                const consoleSpy = jest.spyOn(devConsole, 'warn');
-                consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
                     <FieldContainer label={label} hint={hint} fieldId={providedId} validationErrorMessage="">
                         <Input />
@@ -212,12 +205,9 @@ describe('Field Container', () => {
                 expect(inputWrapper.prop('aria-labelledby')).toBe(`${providedId}_label`);
                 expect(inputWrapper.prop('aria-describedby')).toBe(`${providedId}_hint`);
                 expect(consoleSpy).toHaveBeenCalledTimes(0);
-                consoleSpy.mockRestore();
             });
 
             test('shouldn\'t contain idInvalid when FieldContainer is valid', () => {
-                const consoleSpy = jest.spyOn(devConsole, 'warn');
-                consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
                     <FieldContainer label={label} fieldId={providedId} validationErrorMessage={invalidMessage}>
                         <Input />
@@ -229,12 +219,9 @@ describe('Field Container', () => {
                 expect(inputWrapper.prop('aria-labelledby')).toBe(`${providedId}_label`);
                 expect(inputWrapper.prop('aria-describedby')).toBe(undefined);
                 expect(consoleSpy).toHaveBeenCalledTimes(0);
-                consoleSpy.mockRestore();
             });
 
             test('should contain idInvalid when FieldContainer is invalid', () => {
-                const consoleSpy = jest.spyOn(devConsole, 'warn');
-                consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
                     <FieldContainer
                         label={label}
@@ -251,12 +238,9 @@ describe('Field Container', () => {
                 expect(inputWrapper.prop('aria-labelledby')).toBe(`${providedId}_label`);
                 expect(inputWrapper.prop('aria-describedby')).toBe(`${providedId}_invalid`);
                 expect(consoleSpy).toHaveBeenCalledTimes(0);
-                consoleSpy.mockRestore();
             });
 
             test('should contain idAdditionalElement when ariaDescribedBy provided', () => {
-                const consoleSpy = jest.spyOn(devConsole, 'warn');
-                consoleSpy.mockImplementation(() => {});
                 const wrapper = renderWithProviders(
                     <FieldContainer
                         label={label}
@@ -274,7 +258,6 @@ describe('Field Container', () => {
                 expect(inputWrapper.prop('aria-labelledby')).toBe(`${providedId}_label`);
                 expect(inputWrapper.prop('aria-describedby')).toBe(`${providedId}_hint ${additionalElementId}`);
                 expect(consoleSpy).toHaveBeenCalledTimes(0);
-                consoleSpy.mockRestore();
             });
         });
 
@@ -310,95 +293,4 @@ describe('Field Container', () => {
             });
         });
     });
-
-    describe('Utils', () => {
-        describe('validateAriaLabels', () => {
-            it('returns true when only one label is provided', () => {
-                expect(validateAriaLabels('label')).toBe(true);
-                expect(validateAriaLabels(undefined, 'ariaLabel')).toBe(true);
-                expect(validateAriaLabels(undefined, undefined, 'ariaLabelledby')).toBe(true);
-            });
-
-            it('returns false when no labels are provided', () => {
-                expect(validateAriaLabels()).toBe(false);
-            });
-
-            it('returns false when more than one label is provided', () => {
-                expect(validateAriaLabels('label', 'ariaLabel')).toBe(false);
-                expect(validateAriaLabels('label', undefined, 'ariaLabelledby')).toBe(false);
-                expect(validateAriaLabels(undefined, 'ariaLabel', 'ariaLabelledby')).toBe(false);
-            });
-        });
-
-        describe('getAriaLabel', () => {
-            it('returns ariaLabel when labels are valid', () => {
-                expect(getAriaLabel(undefined, 'ariaLabel', undefined)).toEqual('ariaLabel');
-            });
-
-            it('returns undefined when labels are not valid', () => {
-                expect(getAriaLabel('label', 'ariaLabel', undefined)).toBeUndefined();
-            });
-        });
-
-        describe('getAriaLabelledby', () => {
-            it('joins label and additionalLabelledby with a space', () => {
-                const output = getAriaLabelledby({ label: 'label' }, 'additionalLabelledby');
-                expect(output).toEqual('label additionalLabelledby');
-            });
-
-            it('returns label when additionalLabelledby is undefined', () => {
-                expect(getAriaLabelledby({ label: 'label' })).toEqual('label');
-            });
-
-            it('returns undefined when label and additionalLabelledby are undefined', () => {
-                expect(getAriaLabelledby({})).toBeUndefined();
-            });
-        });
-
-        describe('getAriaDescribedby', () => {
-            it('joins invalid, hint and additionalDescribedby with a space', () => {
-                const output = getAriaDescribedby({ invalid: 'invalid', hint: 'hint' }, 'additionalDescribedby');
-                expect(output).toEqual('invalid hint additionalDescribedby');
-            });
-
-            it('returns invalid and hint when additionalDescribedby is undefined', () => {
-                const output = getAriaDescribedby({ invalid: 'invalid', hint: 'hint' });
-                expect(output).toEqual('invalid hint');
-            });
-
-            it('returns undefined when invalid, hint and additionalDescribedby are undefined', () => {
-                expect(getAriaDescribedby({})).toBeUndefined();
-            });
-        });
-
-        describe('getSlotId', () => {
-            it('returns a string with formFieldId and propName when prop is provided', () => {
-                expect(getSlotId('prop', 'formFieldId', 'propName')).toEqual('formFieldId_propName');
-            });
-
-            it('returns undefined when prop is not provided', () => {
-                expect(getSlotId(undefined, 'formFieldId', 'propName')).toBeUndefined();
-            });
-        });
-
-        describe('getSlotIds', () => {
-            it('returns an object with label, hint, and invalid ids when all props are provided', () => {
-                const result = getSlotIds('formFieldId', 'label', 'hint', 'invalid');
-                expect(result).toEqual({
-                    label: 'formFieldId_label',
-                    hint: 'formFieldId_hint',
-                    invalid: 'formFieldId_invalid',
-                });
-            });
-
-            it('returns an object with undefined ids when props are not provided', () => {
-                const result = getSlotIds('formFieldId');
-                expect(result).toEqual({
-                    label: undefined,
-                    hint: undefined,
-                    invalid: undefined,
-                });
-            });
-        });
-    });
 });
diff --git a/packages/react/src/internal/field/container/field-container.test.tsx.snap b/packages/react/src/internal/field/container/field-container.test.tsx.snap
new file mode 100644
index 0000000000..f2a0c1faab
--- /dev/null
+++ b/packages/react/src/internal/field/container/field-container.test.tsx.snap
@@ -0,0 +1,319 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Field Container Styling match noMargin snapshot 1`] = `
+.c2 {
+  color: #1B1C1E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+  margin: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+input + .c1 {
+  margin-left: var(--spacing-half);
+}
+
+.c3 {
+  color: #60666E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+.c0 {
+  margin: 0;
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0 > :nth-child(2) {
+  margin-bottom: var(--spacing-half);
+}
+
+<div
+  class="c0"
+>
+  <label
+    class="c1 c2"
+    data-testid="field-label"
+    for="id"
+    id="id_label"
+  >
+    This is a label.
+  </label>
+  <span
+    class="c3"
+    data-testid="field-hint"
+    id="id_hint"
+  >
+    This is a hint.
+  </span>
+  Children
+</div>
+`;
+
+exports[`Field Container Styling match required snapshot 1`] = `
+.c2 {
+  color: #1B1C1E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+  margin: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+input + .c1 {
+  margin-left: var(--spacing-half);
+}
+
+.c3 {
+  color: #60666E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0 > :nth-child(2) {
+  margin-bottom: var(--spacing-half);
+}
+
+<div
+  class="c0"
+>
+  <label
+    class="c1 c2"
+    data-testid="field-label"
+    for="id"
+    id="id_label"
+  >
+    This is a label. (required)
+  </label>
+  <span
+    class="c3"
+    data-testid="field-hint"
+    id="id_hint"
+  >
+    This is a hint.
+  </span>
+  Children
+</div>
+`;
+
+exports[`Field Container Styling matches default snapshot 1`] = `
+.c2 {
+  color: #1B1C1E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+  margin: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+input + .c1 {
+  margin-left: var(--spacing-half);
+}
+
+.c3 {
+  color: #60666E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0 > :nth-child(2) {
+  margin-bottom: var(--spacing-half);
+}
+
+<div
+  class="c0"
+>
+  <label
+    class="c1 c2"
+    data-testid="field-label"
+    for="id"
+    id="id_label"
+  >
+    This is a label.
+  </label>
+  <span
+    class="c3"
+    data-testid="field-hint"
+    id="id_hint"
+  >
+    This is a hint.
+  </span>
+  Children
+</div>
+`;
+
+exports[`Field Container Styling matches invalid snapshot 1`] = `
+.c4 {
+  color: #CD2C23;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+.c5 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: var(--spacing-base);
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+  margin: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+input + .c1 {
+  margin-left: var(--spacing-half);
+}
+
+.c3 {
+  color: #60666E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #CD2C23;
+}
+
+.c0 > :nth-child(3) {
+  margin-bottom: var(--spacing-half);
+}
+
+<div
+  class="c0"
+>
+  <label
+    class="c1 c2"
+    data-testid="field-label"
+    for="id"
+    id="id_label"
+  >
+    This is a label.
+  </label>
+  <span
+    class="c3"
+    data-testid="field-hint"
+    id="id_hint"
+  >
+    This is a hint.
+  </span>
+  <span
+    aria-live="polite"
+    class="c4"
+    data-testid="invalid-field"
+    id="id_invalid"
+    role="alert"
+  >
+    <svg
+      class="c5"
+      color="currentColor"
+      focusable="false"
+      height="16"
+      width="16"
+    />
+    This text area input is invalid
+  </span>
+  Children
+</div>
+`;
diff --git a/packages/react/src/components/field-container/field-container.tsx b/packages/react/src/internal/field/container/field-container.tsx
similarity index 76%
rename from packages/react/src/components/field-container/field-container.tsx
rename to packages/react/src/internal/field/container/field-container.tsx
index a8462a9c7a..9e8840c9d3 100644
--- a/packages/react/src/components/field-container/field-container.tsx
+++ b/packages/react/src/internal/field/container/field-container.tsx
@@ -1,10 +1,10 @@
 import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
-import { useDataAttributes } from '../../hooks/use-data-attributes';
-import { useId } from '../../hooks/use-id';
-import { FieldControlContext } from './context';
-import { InvalidFieldMessage } from '../feedbacks/invalid-field-message';
-import { Label } from '../label/label';
-import { Hint } from '../hint/hint';
+import { useDataAttributes } from '../../../hooks/use-data-attributes';
+import { useId } from '../../../hooks/use-id';
+import { FieldContext } from '../context';
+import { ValidationMessage } from '../validation-message';
+import { Label } from '../../label';
+import { Hint } from '../hint';
 import { StyledDiv } from './styled';
 import { FieldContainerProps } from './types';
 import { getAriaDescribedby, getAriaLabel, getAriaLabelledby, getSlotIds } from './utils';
@@ -30,7 +30,7 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
     const dataAttributes = useDataAttributes(otherProps);
     const fieldId = useId(providedId);
 
-    const slotIds = getSlotIds(fieldId, label, hint, (validationErrorMessage && !valid));
+    const slotIds = getSlotIds(fieldId, !!label, !!hint, !!(validationErrorMessage && !valid));
     const ariaLabel = getAriaLabel(label, providedAriaLabel, providedAriaLabelledby);
     const ariaLabelledby = getAriaLabelledby(slotIds, providedAriaLabelledby);
     const ariaDescribedby = getAriaDescribedby(slotIds, providedAriaDescribedby);
@@ -48,7 +48,7 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
     }), [fieldId, ariaLabel, ariaLabelledby, ariaDescribedby, valid, hint, required, disabled, slotIds]);
 
     return (
-        <FieldControlContext.Provider value={contextValues}>
+        <FieldContext.Provider value={contextValues}>
             <StyledDiv
                 className={className}
                 $noMargin={noMargin}
@@ -61,12 +61,12 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
                 {label && <Label tooltip={tooltip}>{label}</Label>}
                 {hint && <Hint>{hint}</Hint>}
                 {!valid && (
-                    <InvalidFieldMessage noInvalidFieldIcon={noInvalidFieldIcon}>
+                    <ValidationMessage noInvalidFieldIcon={noInvalidFieldIcon}>
                         {validationErrorMessage}
-                    </InvalidFieldMessage>
+                    </ValidationMessage>
                 )}
                 {children}
             </StyledDiv>
-        </FieldControlContext.Provider>
+        </FieldContext.Provider>
     );
 };
diff --git a/packages/react/src/internal/field/container/index.ts b/packages/react/src/internal/field/container/index.ts
new file mode 100644
index 0000000000..79e452dce2
--- /dev/null
+++ b/packages/react/src/internal/field/container/index.ts
@@ -0,0 +1,2 @@
+export { FieldContainer } from './field-container';
+export { FieldContainerProps } from './types';
diff --git a/packages/react/src/components/field-container/styled.ts b/packages/react/src/internal/field/container/styled.ts
similarity index 100%
rename from packages/react/src/components/field-container/styled.ts
rename to packages/react/src/internal/field/container/styled.ts
diff --git a/packages/react/src/internal/field/container/types.ts b/packages/react/src/internal/field/container/types.ts
new file mode 100644
index 0000000000..708f4e46ef
--- /dev/null
+++ b/packages/react/src/internal/field/container/types.ts
@@ -0,0 +1,29 @@
+import { NativeAriaProps, NativeDOMProps, NativeHTMLProps } from '../../../types/native-props';
+import { LabelProps } from '../../label/types';
+import { FieldControlProps } from '../context';
+import { ValidationMessageProps } from '../validation-message/types';
+
+type PartialDOMProps = Omit<NativeDOMProps, 'id' | 'ref'>;
+
+type PartialAriaProps = Omit<NativeAriaProps, 'id' | 'ref'>;
+
+type PartialHTMLAttributes = Omit<NativeHTMLProps, 'id' | 'ref'>;
+
+type PartialLabelProps = Pick<LabelProps, 'tooltip'>;
+
+type PartialValidationMessageProps = Pick<ValidationMessageProps, 'noInvalidFieldIcon'>;
+
+export interface FieldContainerProps extends
+    Omit<FieldControlProps, 'id' | 'slotIds'>,
+    PartialDOMProps,
+    PartialAriaProps,
+    PartialHTMLAttributes,
+    PartialLabelProps,
+    PartialValidationMessageProps
+{
+    fieldId?: string;
+    noMargin?: boolean;
+    label?: string;
+    hint?: string;
+    validationErrorMessage: string;
+}
diff --git a/packages/react/src/internal/field/container/utils.test.ts b/packages/react/src/internal/field/container/utils.test.ts
new file mode 100644
index 0000000000..ae77de09b5
--- /dev/null
+++ b/packages/react/src/internal/field/container/utils.test.ts
@@ -0,0 +1,99 @@
+import {
+    getAriaDescribedby,
+    getAriaLabel,
+    getAriaLabelledby,
+    getSlotId,
+    getSlotIds,
+    validateAriaLabels,
+} from './utils';
+
+describe('Field Container Utils', () => {
+    describe('validateAriaLabels', () => {
+        it('returns true when only one label is provided', () => {
+            expect(validateAriaLabels('label')).toBe(true);
+            expect(validateAriaLabels(undefined, 'ariaLabel')).toBe(true);
+            expect(validateAriaLabels(undefined, undefined, 'ariaLabelledby')).toBe(true);
+        });
+
+        it('returns false when no labels are provided', () => {
+            expect(validateAriaLabels()).toBe(false);
+        });
+
+        it('returns false when more than one label is provided', () => {
+            expect(validateAriaLabels('label', 'ariaLabel')).toBe(false);
+            expect(validateAriaLabels('label', undefined, 'ariaLabelledby')).toBe(false);
+            expect(validateAriaLabels(undefined, 'ariaLabel', 'ariaLabelledby')).toBe(false);
+        });
+    });
+
+    describe('getAriaLabel', () => {
+        it('returns ariaLabel when labels are valid', () => {
+            expect(getAriaLabel(undefined, 'ariaLabel', undefined)).toEqual('ariaLabel');
+        });
+
+        it('returns undefined when labels are not valid', () => {
+            expect(getAriaLabel('label', 'ariaLabel', undefined)).toBeUndefined();
+        });
+    });
+
+    describe('getAriaLabelledby', () => {
+        it('joins label and additionalLabelledby with a space', () => {
+            const output = getAriaLabelledby({ label: 'label' }, 'additionalLabelledby');
+            expect(output).toEqual('label additionalLabelledby');
+        });
+
+        it('returns label when additionalLabelledby is undefined', () => {
+            expect(getAriaLabelledby({ label: 'label' })).toEqual('label');
+        });
+
+        it('returns undefined when label and additionalLabelledby are undefined', () => {
+            expect(getAriaLabelledby({})).toBeUndefined();
+        });
+    });
+
+    describe('getAriaDescribedby', () => {
+        it('joins invalid, hint and additionalDescribedby with a space', () => {
+            const output = getAriaDescribedby({ invalid: 'invalid', hint: 'hint' }, 'additionalDescribedby');
+            expect(output).toEqual('invalid hint additionalDescribedby');
+        });
+
+        it('returns invalid and hint when additionalDescribedby is undefined', () => {
+            const output = getAriaDescribedby({ invalid: 'invalid', hint: 'hint' });
+            expect(output).toEqual('invalid hint');
+        });
+
+        it('returns undefined when invalid, hint and additionalDescribedby are undefined', () => {
+            expect(getAriaDescribedby({})).toBeUndefined();
+        });
+    });
+
+    describe('getSlotId', () => {
+        it('returns a string with formFieldId and propName when prop is provided', () => {
+            expect(getSlotId(true, 'formFieldId', 'propName')).toEqual('formFieldId_propName');
+        });
+
+        it('returns undefined when prop is not provided', () => {
+            expect(getSlotId(undefined, 'formFieldId', 'propName')).toBeUndefined();
+        });
+    });
+
+    describe('getSlotIds', () => {
+        it('returns an object with label, hint, and invalid ids when all props are provided', () => {
+            const result = getSlotIds('formFieldId', true, true, true);
+            expect(result).toEqual({
+                label: 'formFieldId_label',
+                hint: 'formFieldId_hint',
+                invalid: 'formFieldId_invalid',
+            });
+        });
+
+        it('returns an object with undefined ids when props are not provided', () => {
+            const result = getSlotIds('formFieldId');
+            expect(result).toEqual({
+                label: undefined,
+                hint: undefined,
+                invalid: undefined,
+            });
+        });
+    });
+});
diff --git a/packages/react/src/components/field-container/utils.ts b/packages/react/src/internal/field/container/utils.ts
similarity index 76%
rename from packages/react/src/components/field-container/utils.ts
rename to packages/react/src/internal/field/container/utils.ts
index 5c5261ecb7..e81fa390b6 100644
--- a/packages/react/src/components/field-container/utils.ts
+++ b/packages/react/src/internal/field/container/utils.ts
@@ -1,17 +1,16 @@
-import { ReactNode } from 'react';
-import { devConsole } from '../../utils/dev-console';
-import { joinStrings } from '../../utils/string';
-import { FieldSlotIds } from './types';
+import { devConsole } from '../../../utils/dev-console';
+import { joinStrings } from '../../../utils/string';
+import { FieldSlotIds } from '../context';
 
-export function getSlotId(prop: ReactNode, fieldId: string, propName: string): string | undefined {
-    return prop ? `${fieldId}_${propName}` : undefined;
+export function getSlotId(hasSlot: boolean | undefined, fieldId: string, slotName: string): string | undefined {
+    return hasSlot ? `${fieldId}_${slotName}` : undefined;
 }
 
 export function getSlotIds(
     fieldId: string,
-    label?: ReactNode,
-    hint?: ReactNode,
-    invalid?: ReactNode,
+    label?: boolean,
+    hint?: boolean,
+    invalid?: boolean,
 ): FieldSlotIds {
     return {
         label: getSlotId(label, fieldId, 'label'),
diff --git a/packages/react/src/internal/field/context.ts b/packages/react/src/internal/field/context.ts
new file mode 100644
index 0000000000..7ac10bea51
--- /dev/null
+++ b/packages/react/src/internal/field/context.ts
@@ -0,0 +1,29 @@
+import { createContext, useContext, useMemo } from 'react';
+
+export interface FieldSlotIds {
+    label?: string;
+    hint?: string;
+    invalid?: string;
+}
+
+export interface FieldControlProps {
+    id?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string
+    disabled?: boolean;
+    required?: boolean;
+    valid?: boolean;
+    slotIds?: FieldSlotIds;
+}
+
+export const FieldContext = createContext<FieldControlProps>({});
+
+export function useFieldControl(overrides: FieldControlProps | null = null): FieldControlProps {
+    const prevContext = useContext(FieldContext);
+
+    return useMemo(() => ({
+        ...prevContext,
+        ...overrides,
+    }), [prevContext, overrides]);
+}
diff --git a/packages/react/src/internal/field/hint/hint.test.tsx b/packages/react/src/internal/field/hint/hint.test.tsx
new file mode 100644
index 0000000000..cf22fb8394
--- /dev/null
+++ b/packages/react/src/internal/field/hint/hint.test.tsx
@@ -0,0 +1,33 @@
+import { renderPortalWithProviders } from '../../../test-utils/renderer';
+import { Hint } from './hint';
+
+describe('Hint', () => {
+    const hint = 'Test Hint';
+    const customTestId = 'my-test-id';
+
+    describe('Features', () => {
+        it('renders correctly with children', () => {
+            const { getByText, getByTestId } = renderPortalWithProviders(<Hint>{hint}</Hint>);
+            expect(getByTestId('field-hint')).toBeDefined();
+            expect(getByText(hint)).toBeDefined();
+        });
+
+        test('can override data-testid', () => {
+            const { getByTestId } = renderPortalWithProviders(<Hint data-testid={customTestId} />);
+
+            expect(getByTestId(customTestId)).toBeDefined();
+        });
+    });
+
+    describe('Styling', () => {
+        it('matches default snapshot', () => {
+            const wrapper = renderPortalWithProviders(<Hint>Test Hint</Hint>);
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        it('matches mobile snapshot', () => {
+            const wrapper = renderPortalWithProviders(<Hint>Test Hint</Hint>, 'mobile');
+            expect(wrapper).toMatchSnapshot();
+        });
+    });
+});
diff --git a/packages/react/src/internal/field/hint/hint.test.tsx.snap b/packages/react/src/internal/field/hint/hint.test.tsx.snap
new file mode 100644
index 0000000000..abe20623af
--- /dev/null
+++ b/packages/react/src/internal/field/hint/hint.test.tsx.snap
@@ -0,0 +1,227 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Hint Styling matches default snapshot 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": .c1 {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 100000;
+  bottom: var(--spacing-2x);
+  right: var(--spacing-2x);
+}
+
+.c0 {
+  color: #60666E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+<body>
+    <div>
+      <span
+        class="c0"
+        data-testid="field-hint"
+        id="uuid1"
+      >
+        Test Hint
+      </span>
+    </div>
+    <div
+      class="c1"
+      data-testid="toasts"
+    />
+  </body>,
+  "container": .c0 {
+  color: #60666E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+<div>
+    <span
+      class="c0"
+      data-testid="field-hint"
+      id="uuid1"
+    >
+      Test Hint
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Hint Styling matches mobile snapshot 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": .c1 {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 100000;
+  bottom: var(--spacing-2x);
+  right: 0;
+}
+
+.c0 {
+  color: #60666E;
+  display: block;
+  font-size: 0.875rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.5rem;
+}
+
+<body>
+    <div>
+      <span
+        class="c0"
+        data-testid="field-hint"
+        id="uuid1"
+      >
+        Test Hint
+      </span>
+    </div>
+    <div
+      class="c1"
+      data-testid="toasts"
+    />
+  </body>,
+  "container": .c0 {
+  color: #60666E;
+  display: block;
+  font-size: 0.875rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.5rem;
+}
+
+<div>
+    <span
+      class="c0"
+      data-testid="field-hint"
+      id="uuid1"
+    >
+      Test Hint
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/packages/react/src/components/hint/hint.tsx b/packages/react/src/internal/field/hint/hint.tsx
similarity index 73%
rename from packages/react/src/components/hint/hint.tsx
rename to packages/react/src/internal/field/hint/hint.tsx
index eb6c87417d..450a26150f 100644
--- a/packages/react/src/components/hint/hint.tsx
+++ b/packages/react/src/internal/field/hint/hint.tsx
@@ -1,8 +1,8 @@
 import { forwardRef, PropsWithChildren, ReactElement, Ref } from 'react';
-import { useDataAttributes } from '../../hooks/use-data-attributes';
-import { useId } from '../../hooks/use-id';
-import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { useFieldControlContext } from '../field-container/context';
+import { useDataAttributes } from '../../../hooks/use-data-attributes';
+import { useId } from '../../../hooks/use-id';
+import { useDeviceContext } from '../../../components/device-context-provider/device-context-provider';
+import { useFieldControl } from '../context';
 import { StyledHint } from './styled';
 import { HintProps } from './types';
 
@@ -13,7 +13,7 @@ export const Hint = forwardRef(({
 }: PropsWithChildren<HintProps>, ref: Ref<HTMLSpanElement>): ReactElement => {
     const { isMobile } = useDeviceContext();
     const dataAttributes = useDataAttributes(otherProps);
-    const { slotIds } = useFieldControlContext({});
+    const { slotIds } = useFieldControl();
     const id = useId(providedId ?? slotIds?.hint);
 
     return (
diff --git a/packages/react/src/internal/field/hint/index.ts b/packages/react/src/internal/field/hint/index.ts
new file mode 100644
index 0000000000..a0ab228694
--- /dev/null
+++ b/packages/react/src/internal/field/hint/index.ts
@@ -0,0 +1 @@
+export { Hint } from './hint';
diff --git a/packages/react/src/components/hint/styled.ts b/packages/react/src/internal/field/hint/styled.ts
similarity index 100%
rename from packages/react/src/components/hint/styled.ts
rename to packages/react/src/internal/field/hint/styled.ts
diff --git a/packages/react/src/internal/field/hint/types.ts b/packages/react/src/internal/field/hint/types.ts
new file mode 100644
index 0000000000..23b14c391e
--- /dev/null
+++ b/packages/react/src/internal/field/hint/types.ts
@@ -0,0 +1,5 @@
+import { NativeHTMLProps } from '../../../types/native-props';
+
+type PartialNativeHTMLProps = Omit<NativeHTMLProps, 'ref'>
+
+export interface HintProps extends PartialNativeHTMLProps {}
diff --git a/packages/react/src/internal/field/validation-message/index.ts b/packages/react/src/internal/field/validation-message/index.ts
new file mode 100644
index 0000000000..582bd91ea2
--- /dev/null
+++ b/packages/react/src/internal/field/validation-message/index.ts
@@ -0,0 +1 @@
+export { ValidationMessage } from './validation-message';
diff --git a/packages/react/src/components/feedbacks/styled.ts b/packages/react/src/internal/field/validation-message/styled.ts
similarity index 91%
rename from packages/react/src/components/feedbacks/styled.ts
rename to packages/react/src/internal/field/validation-message/styled.ts
index ebe4a69c05..393e45a904 100644
--- a/packages/react/src/components/feedbacks/styled.ts
+++ b/packages/react/src/internal/field/validation-message/styled.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Icon } from '../icon/icon';
+import { Icon } from '../../../components/icon/icon';
 
 export const StyledValidationMessage = styled.span<{ $isMobile: boolean }>`
     color: ${(props) => props.theme.component['field-error-text-color']};
diff --git a/packages/react/src/internal/field/validation-message/types.ts b/packages/react/src/internal/field/validation-message/types.ts
new file mode 100644
index 0000000000..3650cba3cb
--- /dev/null
+++ b/packages/react/src/internal/field/validation-message/types.ts
@@ -0,0 +1,7 @@
+import { NativeHTMLProps } from '../../../types/native-props';
+
+type PartialNativeDivProps = Omit<NativeHTMLProps, 'ref'>;
+
+export interface ValidationMessageProps extends PartialNativeDivProps {
+    noInvalidFieldIcon?: boolean;
+}
diff --git a/packages/react/src/internal/field/validation-message/validation-message.test.tsx b/packages/react/src/internal/field/validation-message/validation-message.test.tsx
new file mode 100644
index 0000000000..68fb7ef2e4
--- /dev/null
+++ b/packages/react/src/internal/field/validation-message/validation-message.test.tsx
@@ -0,0 +1,55 @@
+import { renderPortalWithProviders } from '../../../test-utils/renderer';
+import { ValidationMessage } from './validation-message';
+
+describe('Validation Message', () => {
+    const message = 'Validation Message';
+    const customTestId = 'my-test-id';
+
+    describe('Features', () => {
+        it('renders correctly with children', () => {
+            const { getByText, getByTestId } = renderPortalWithProviders(
+                <ValidationMessage>{message}</ValidationMessage>,
+            );
+            expect(getByText(message)).toBeDefined();
+            expect(getByTestId('invalid-field')).toBeDefined();
+        });
+
+        test('can override data-testid', () => {
+            const { getByTestId } = renderPortalWithProviders(
+                <ValidationMessage data-testid={customTestId} />,
+            );
+
+            expect(getByTestId(customTestId)).toBeDefined();
+        });
+    });
+
+    describe('Styling', () => {
+        it('matches default snapshot', () => {
+            const wrapper = renderPortalWithProviders(
+                <ValidationMessage>
+                    {message}
+                </ValidationMessage>,
+            );
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        it('matches no icon snapshot', () => {
+            const wrapper = renderPortalWithProviders(
+                <ValidationMessage noInvalidFieldIcon>
+                    {message}
+                </ValidationMessage>,
+            );
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        it('matches mobile snapshot', () => {
+            const wrapper = renderPortalWithProviders(
+                <ValidationMessage>
+                    Feedback Message
+                </ValidationMessage>,
+                'mobile',
+            );
+            expect(wrapper).toMatchSnapshot();
+        });
+    });
+});
diff --git a/packages/react/src/internal/field/validation-message/validation-message.test.tsx.snap b/packages/react/src/internal/field/validation-message/validation-message.test.tsx.snap
new file mode 100644
index 0000000000..0e6f93f686
--- /dev/null
+++ b/packages/react/src/internal/field/validation-message/validation-message.test.tsx.snap
@@ -0,0 +1,442 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Validation Message Styling matches default snapshot 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": .c2 {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 100000;
+  bottom: var(--spacing-2x);
+  right: var(--spacing-2x);
+}
+
+.c0 {
+  color: #CD2C23;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+.c1 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: var(--spacing-base);
+}
+
+<body>
+    <div>
+      <span
+        aria-live="polite"
+        class="c0"
+        data-testid="invalid-field"
+        id="uuid1"
+        role="alert"
+      >
+        <svg
+          class="c1"
+          color="currentColor"
+          focusable="false"
+          height="16"
+          width="16"
+        />
+        Validation Message
+      </span>
+    </div>
+    <div
+      class="c2"
+      data-testid="toasts"
+    />
+  </body>,
+  "container": .c0 {
+  color: #CD2C23;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+.c1 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: var(--spacing-base);
+}
+
+<div>
+    <span
+      aria-live="polite"
+      class="c0"
+      data-testid="invalid-field"
+      id="uuid1"
+      role="alert"
+    >
+      <svg
+        class="c1"
+        color="currentColor"
+        focusable="false"
+        height="16"
+        width="16"
+      />
+      Validation Message
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Validation Message Styling matches mobile snapshot 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": .c2 {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 100000;
+  bottom: var(--spacing-2x);
+  right: 0;
+}
+
+.c0 {
+  color: #CD2C23;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.875rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.5rem;
+}
+
+.c1 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: var(--spacing-base);
+}
+
+<body>
+    <div>
+      <span
+        aria-live="polite"
+        class="c0"
+        data-testid="invalid-field"
+        id="uuid1"
+        role="alert"
+      >
+        <svg
+          class="c1"
+          color="currentColor"
+          focusable="false"
+          height="24"
+          width="24"
+        />
+        Feedback Message
+      </span>
+    </div>
+    <div
+      class="c2"
+      data-testid="toasts"
+    />
+  </body>,
+  "container": .c0 {
+  color: #CD2C23;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.875rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.5rem;
+}
+
+.c1 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: var(--spacing-base);
+}
+
+<div>
+    <span
+      aria-live="polite"
+      class="c0"
+      data-testid="invalid-field"
+      id="uuid1"
+      role="alert"
+    >
+      <svg
+        class="c1"
+        color="currentColor"
+        focusable="false"
+        height="24"
+        width="24"
+      />
+      Feedback Message
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Validation Message Styling matches no icon snapshot 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": .c1 {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 100000;
+  bottom: var(--spacing-2x);
+  right: var(--spacing-2x);
+}
+
+.c0 {
+  color: #CD2C23;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+<body>
+    <div>
+      <span
+        aria-live="polite"
+        class="c0"
+        data-testid="invalid-field"
+        id="uuid1"
+        role="alert"
+      >
+        Validation Message
+      </span>
+    </div>
+    <div
+      class="c1"
+      data-testid="toasts"
+    />
+  </body>,
+  "container": .c0 {
+  color: #CD2C23;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
+<div>
+    <span
+      aria-live="polite"
+      class="c0"
+      data-testid="invalid-field"
+      id="uuid1"
+      role="alert"
+    >
+      Validation Message
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/packages/react/src/components/feedbacks/invalid-field-message.tsx b/packages/react/src/internal/field/validation-message/validation-message.tsx
similarity index 62%
rename from packages/react/src/components/feedbacks/invalid-field-message.tsx
rename to packages/react/src/internal/field/validation-message/validation-message.tsx
index 5d7a6284c5..aba7e12faf 100644
--- a/packages/react/src/components/feedbacks/invalid-field-message.tsx
+++ b/packages/react/src/internal/field/validation-message/validation-message.tsx
@@ -1,20 +1,20 @@
 import { forwardRef, PropsWithChildren, ReactElement, Ref } from 'react';
-import { useDataAttributes } from '../../hooks/use-data-attributes';
-import { useId } from '../../hooks/use-id';
-import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { useFieldControlContext } from '../field-container/context';
+import { useDataAttributes } from '../../../hooks/use-data-attributes';
+import { useId } from '../../../hooks/use-id';
+import { useDeviceContext } from '../../../components/device-context-provider/device-context-provider';
+import { useFieldControl } from '../context';
 import { StyledIcon, StyledValidationMessage } from './styled';
-import { InvalidFieldMessageProps } from './types';
+import { ValidationMessageProps } from './types';
 
-export const InvalidFieldMessage = forwardRef(({
+export const ValidationMessage = forwardRef(({
     children,
     id: providedId,
     noInvalidFieldIcon,
     ...otherProps
-}: PropsWithChildren<InvalidFieldMessageProps>, ref: Ref<HTMLSpanElement>): ReactElement => {
+}: PropsWithChildren<ValidationMessageProps>, ref: Ref<HTMLSpanElement>): ReactElement => {
     const { isMobile } = useDeviceContext();
     const dataAttributes = useDataAttributes(otherProps);
-    const { slotIds } = useFieldControlContext({});
+    const { slotIds } = useFieldControl();
     const id = useId(providedId ?? slotIds?.invalid);
 
     return (
@@ -36,4 +36,4 @@ export const InvalidFieldMessage = forwardRef(({
     );
 });
 
-InvalidFieldMessage.displayName = 'InvalidFieldMessage';
+ValidationMessage.displayName = 'InvalidFieldMessage';
diff --git a/packages/react/src/internal/input/index.ts b/packages/react/src/internal/input/index.ts
new file mode 100644
index 0000000000..f376f8cdbe
--- /dev/null
+++ b/packages/react/src/internal/input/index.ts
@@ -0,0 +1 @@
+export { Input } from './input';
diff --git a/packages/react/src/internal/input/input.tsx b/packages/react/src/internal/input/input.tsx
new file mode 100644
index 0000000000..8f82e260db
--- /dev/null
+++ b/packages/react/src/internal/input/input.tsx
@@ -0,0 +1,49 @@
+import { forwardRef, ReactElement, Ref } from 'react';
+import { useId } from '../../hooks/use-id';
+import { useDeviceContext } from '../../components/device-context-provider/device-context-provider';
+import { useFieldControl } from '../field/context';
+import { StyledInput } from './styled';
+import { InputProps } from './types';
+import { useDataAttributes } from '../../hooks/use-data-attributes';
+
+export const Input = forwardRef(({
+    id: providedId,
+    valid: providedValid = true,
+    required: providedRequired = false,
+    disabled: providedDisabled = false,
+    ...otherProps
+}: InputProps, ref: Ref<HTMLInputElement>): ReactElement => {
+    const dataAttributes = useDataAttributes(otherProps);
+    const { isMobile } = useDeviceContext();
+    const inputId = useId(providedId);
+
+    const {
+        id = inputId,
+        valid = providedValid,
+        required = providedRequired,
+        disabled = providedDisabled,
+        ariaLabel,
+        ariaLabelledby,
+        ariaDescribedby,
+    } = useFieldControl(otherProps);
+
+    return (
+        <StyledInput
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabel ? undefined : ariaLabelledby}
+            aria-describedby={ariaDescribedby}
+            aria-disabled={disabled}
+            aria-invalid={valid ? 'false' : 'true'}
+            data-testid="input"
+            id={id}
+            disabled={disabled}
+            required={required}
+            $isMobile={isMobile}
+            ref={ref}
+            {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
+            {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
+        />
+    );
+});
+
+Input.displayName = 'Input';
diff --git a/packages/react/src/components/input/input.tsx b/packages/react/src/internal/input/styled.ts
similarity index 50%
rename from packages/react/src/components/input/input.tsx
rename to packages/react/src/internal/input/styled.ts
index 1db49a1838..b2a77b112b 100644
--- a/packages/react/src/components/input/input.tsx
+++ b/packages/react/src/internal/input/styled.ts
@@ -1,12 +1,7 @@
-import { forwardRef, ReactElement, Ref } from 'react';
 import styled from 'styled-components';
-import { useId } from '../../hooks/use-id';
-import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { useFieldControlContext } from '../field-container/context';
 import { focus } from '../../utils/css-state';
-import { InputProps } from './types';
 
-const StyledInput = styled.input<{ $isMobile: boolean }>`
+export const StyledInput = styled.input<{ $isMobile: boolean }>`
     background: ${({ theme }) => theme.component['text-input-background-color']};
     border: 1px solid;
     border-radius: var(--border-radius);
@@ -50,43 +45,3 @@ const StyledInput = styled.input<{ $isMobile: boolean }>`
 
     ${({ theme }) => focus({ theme })};
 `;
-
-export const Input = forwardRef(({
-    id: providedId,
-    valid: providedValid = true,
-    required: providedRequired = false,
-    disabled: providedDisabled = false,
-    ...otherProps
-}: InputProps, ref: Ref<HTMLInputElement>): ReactElement => {
-    const { isMobile } = useDeviceContext();
-    const inputId = useId(providedId);
-
-    const {
-        id = inputId,
-        valid = providedValid,
-        required = providedRequired,
-        disabled = providedDisabled,
-        ariaLabel,
-        ariaLabelledby,
-        ariaDescribedby,
-    } = useFieldControlContext(otherProps);
-
-    return (
-        <StyledInput
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabel ? undefined : ariaLabelledby}
-            aria-describedby={ariaDescribedby}
-            aria-disabled={disabled}
-            aria-invalid={valid ? 'false' : 'true'}
-            data-testid="input"
-            id={id}
-            disabled={disabled}
-            required={required}
-            $isMobile={isMobile}
-            ref={ref}
-            {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
-        />
-    );
-});
-
-Input.displayName = 'Input';
diff --git a/packages/react/src/components/input/types.ts b/packages/react/src/internal/input/types.ts
similarity index 84%
rename from packages/react/src/components/input/types.ts
rename to packages/react/src/internal/input/types.ts
index 2db37b468d..63705d5de6 100644
--- a/packages/react/src/components/input/types.ts
+++ b/packages/react/src/internal/input/types.ts
@@ -1,5 +1,5 @@
 import { NativeInputProps } from '../../types/native-props';
-import { FieldControlProps } from '../field-container/types';
+import { FieldControlProps } from '../field/context';
 
 type PartialNativeInputProps = Omit<NativeInputProps,
     | 'ref'
diff --git a/packages/react/src/internal/label/index.ts b/packages/react/src/internal/label/index.ts
new file mode 100644
index 0000000000..f28365d90f
--- /dev/null
+++ b/packages/react/src/internal/label/index.ts
@@ -0,0 +1 @@
+export { Label } from './label';
diff --git a/packages/react/src/components/label/label.test.tsx b/packages/react/src/internal/label/label.test.tsx
similarity index 90%
rename from packages/react/src/components/label/label.test.tsx
rename to packages/react/src/internal/label/label.test.tsx
index 1cc1f09c8e..237ad5048f 100644
--- a/packages/react/src/components/label/label.test.tsx
+++ b/packages/react/src/internal/label/label.test.tsx
@@ -1,5 +1,5 @@
 import { mountWithTheme, renderWithTheme } from '../../test-utils/renderer';
-import { Tooltip } from '../tooltip/tooltip';
+import { Tooltip } from '../../components/tooltip/tooltip';
 import { Label } from './label';
 
 describe('Label', () => {
diff --git a/packages/react/src/components/label/label.test.tsx.snap b/packages/react/src/internal/label/label.test.tsx.snap
similarity index 100%
rename from packages/react/src/components/label/label.test.tsx.snap
rename to packages/react/src/internal/label/label.test.tsx.snap
diff --git a/packages/react/src/components/label/label.tsx b/packages/react/src/internal/label/label.tsx
similarity index 75%
rename from packages/react/src/components/label/label.tsx
rename to packages/react/src/internal/label/label.tsx
index 0ee7bfdcfb..7343b21983 100644
--- a/packages/react/src/components/label/label.tsx
+++ b/packages/react/src/internal/label/label.tsx
@@ -1,26 +1,21 @@
 import { forwardRef, Fragment, FunctionComponent, PropsWithChildren, ReactElement, Ref } from 'react';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useId } from '../../hooks/use-id';
-import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { useFieldControlContext } from '../field-container/context';
+import { useDeviceContext } from '../../components/device-context-provider/device-context-provider';
 import { useTranslation } from '../../i18n/use-translation';
+import { useFieldControl } from '../field/context';
 import { StyledLabel, StyledTooltip, StyledWrapper } from './styled';
-import { LabelProps, RequiredLabelProps } from './types';
+import { LabelProps } from './types';
 
-const RequiredLabel: FunctionComponent<RequiredLabelProps> = ({ type }) => {
+const RequiredLabel: FunctionComponent = () => {
     const { t } = useTranslation('text-input');
-
-    switch (type) {
-        case 'text':
-        default:
-            return (
-                <>
-                    &nbsp;(
-                    {t('required')}
-                    )
-                </>
-            );
-    }
+    return (
+        <>
+            &nbsp;(
+            {t('required')}
+            )
+        </>
+    );
 };
 
 export const Label = forwardRef(({
@@ -37,7 +32,7 @@ export const Label = forwardRef(({
         id: inputId,
         slotIds,
         required,
-    } = useFieldControlContext({});
+    } = useFieldControl();
     const id = useId(slotIds?.label ?? providedId);
     const htmlFor = inputId ?? providedForId;
 
diff --git a/packages/react/src/components/label/styled.ts b/packages/react/src/internal/label/styled.ts
similarity index 92%
rename from packages/react/src/components/label/styled.ts
rename to packages/react/src/internal/label/styled.ts
index 1892b9935c..0399ac32fc 100644
--- a/packages/react/src/components/label/styled.ts
+++ b/packages/react/src/internal/label/styled.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Tooltip } from '../tooltip/tooltip';
+import { Tooltip } from '../../components/tooltip/tooltip';
 
 export const StyledWrapper = styled.div`
     align-items: center;
diff --git a/packages/react/src/internal/label/types.ts b/packages/react/src/internal/label/types.ts
new file mode 100644
index 0000000000..da610f0698
--- /dev/null
+++ b/packages/react/src/internal/label/types.ts
@@ -0,0 +1,9 @@
+import { TooltipProps } from '../../components/tooltip/tooltip';
+import { NativeLabelProps } from '../../types/native-props';
+
+type PartialNativeLabelProps = Omit<NativeLabelProps, 'ref'>;
+
+export interface LabelProps extends PartialNativeLabelProps {
+    forId?: string;
+    tooltip?: TooltipProps;
+}
diff --git a/packages/react/src/types/native-props.ts b/packages/react/src/types/native-props.ts
index f2df875326..5d13e758e7 100644
--- a/packages/react/src/types/native-props.ts
+++ b/packages/react/src/types/native-props.ts
@@ -1,9 +1,25 @@
-import { DetailedHTMLProps, HTMLAttributes, InputHTMLAttributes } from 'react';
+import { AriaAttributes, DetailedHTMLProps, DOMAttributes, HTMLAttributes, InputHTMLAttributes } from 'react';
+
+export type NativeDivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+export type NativeAriaProps = DetailedHTMLProps<AriaAttributes, HTMLElement>;
+
+export type NativeDOMProps = DetailedHTMLProps<DOMAttributes<HTMLElement>, HTMLElement>;
+
+export type NativeHTMLProps = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+
+export type NativeButtonProps = DetailedHTMLProps<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+
+export type NativeSelectProps = DetailedHTMLProps<HTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
+
+export type NativeOptionProps = DetailedHTMLProps<HTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
 
 export type NativeInputProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 
-export type NativeSpanProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+export type NativeTextAreaProps = DetailedHTMLProps<HTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
 
 export type NativeLabelProps = DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
 
-export type NativeDivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export type NativeSpanProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+
+export type NativeFormProps = DetailedHTMLProps<HTMLAttributes<HTMLFormElement>, HTMLFormElement>;