diff --git a/src/components/Button/__tests__/Button.spec.tsx b/src/components/Button/__tests__/Button.spec.tsx
index 0f02e074d..0b37cd3a3 100644
--- a/src/components/Button/__tests__/Button.spec.tsx
+++ b/src/components/Button/__tests__/Button.spec.tsx
@@ -8,10 +8,10 @@ import {
   propTests,
 } from '../../../../tests/playwright';
 import {
-  ButtonForTest,
   ButtonForRefTest,
-  ButtonInVerticalFormLayoutForTest,
+  ButtonForTest,
   ButtonInHorizontalFormLayoutForTest,
+  ButtonInVerticalFormLayoutForTest,
 } from './Button.story';
 
 test.describe('Button', () => {
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-formLayout-visual-horizontal-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-formLayout-visual-horizontal-1-chromium-linux.png
index 7fa11110d..4e0c75d56 100644
Binary files a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-formLayout-visual-horizontal-1-chromium-linux.png and b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-formLayout-visual-horizontal-1-chromium-linux.png differ
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-formLayout-visual-vertical-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-formLayout-visual-vertical-1-chromium-linux.png
index 80576606b..bd46d12c0 100644
Binary files a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-formLayout-visual-vertical-1-chromium-linux.png and b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-formLayout-visual-vertical-1-chromium-linux.png differ
diff --git a/src/components/Button/__tests__/Button.story.tsx b/src/components/Button/__tests__/Button.story.tsx
index b511a077d..b95963fa4 100644
--- a/src/components/Button/__tests__/Button.story.tsx
+++ b/src/components/Button/__tests__/Button.story.tsx
@@ -4,6 +4,7 @@ import React, {
 } from 'react';
 import type { ButtonHTMLAttributes } from 'react';
 import { FormLayout } from '../../FormLayout';
+import { TextField } from '../../TextField';
 import { Button } from '..';
 
 // Types for story component will be improved when we have full TypeScript support
@@ -46,6 +47,7 @@ export const ButtonInVerticalFormLayoutForTest = ({
   ...props
 }: ButtonForTestProps) => (
   <FormLayout fieldLayout="vertical">
+    <TextField label="Text field" />
     <Button
       label="Button"
       {...props}
@@ -57,6 +59,7 @@ export const ButtonInHorizontalFormLayoutForTest = ({
   ...props
 }: ButtonForTestProps) => (
   <FormLayout fieldLayout="horizontal">
+    <TextField label="Text field" />
     <Button
       label="Button"
       {...props}
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx
index 2a815aeef..fc8025035 100644
--- a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx
+++ b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx
@@ -7,12 +7,13 @@ import {
   mixPropTests,
   propTests,
 } from '../../../../tests/playwright';
+import type { CheckboxForFormLayoutTestsProps } from './CheckboxField.story';
 import {
-  CheckboxFieldForTest,
   CheckboxFieldForRefTest,
+  CheckboxFieldForTest,
+  CheckboxForFormLayoutLabelWidthTests,
   CheckboxForFormLayoutTests,
 } from './CheckboxField.story';
-import type { CheckboxForFormLayoutTestsProps } from './CheckboxField.story';
 
 test.describe('CheckboxField', () => {
   test.describe('base', () => {
@@ -139,6 +140,13 @@ test.describe('CheckboxField', () => {
 
   test.describe('formLayout', () => {
     test.describe('visual', () => {
+      test('labelWidth:string=100px', async ({ mount }) => {
+        const component = await mount(<CheckboxForFormLayoutLabelWidthTests />);
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+
       [
         ...propTests.layoutPropTest,
       ].forEach(({
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png
new file mode 100644
index 000000000..2b58d2610
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.story.tsx b/src/components/CheckboxField/__tests__/CheckboxField.story.tsx
index 6b542f175..ae1eef161 100644
--- a/src/components/CheckboxField/__tests__/CheckboxField.story.tsx
+++ b/src/components/CheckboxField/__tests__/CheckboxField.story.tsx
@@ -4,7 +4,10 @@ import React, {
   useRef,
 } from 'react';
 import type { LabelHTMLAttributes } from 'react';
-import { FormLayoutContext } from '../../FormLayout';
+import {
+  FormLayout,
+  FormLayoutContext,
+} from '../../FormLayout';
 import { CheckboxField } from '..';
 
 // Types for story component will be improved when we have full TypeScript support
@@ -48,6 +51,13 @@ export const CheckboxFieldForRefTest = ({
   );
 };
 
+export const CheckboxForFormLayoutLabelWidthTests = () => (
+  <FormLayout fieldLayout="horizontal" labelWidth="100px">
+    <CheckboxField label={defaultLabel} />
+    <CheckboxField label="another-test-label" />
+  </FormLayout>
+);
+
 export const CheckboxForFormLayoutTests = ({
   layout,
   ...props
diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx
index 4d01ec1ee..dcc45d5f9 100644
--- a/src/components/FileInputField/FileInputField.jsx
+++ b/src/components/FileInputField/FileInputField.jsx
@@ -16,7 +16,10 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { InputGroupContext } from '../InputGroup';
 import { Text } from '../Text';
-import { FormLayoutContext } from '../FormLayout';
+import {
+  FormLayoutContext,
+  FormLayoutCustomFieldContext,
+} from '../FormLayout';
 import styles from './FileInputField.module.scss';
 
 /* istanbul ignore file */
@@ -40,6 +43,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
   } = props;
 
   const formLayoutContext = useContext(FormLayoutContext);
+  const formLayoutCustomFieldContext = useContext(FormLayoutCustomFieldContext);
   const inputGroupContext = useContext(InputGroupContext);
   const translations = useContext(TranslationsContext);
 
@@ -172,7 +176,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
       <label
         className={classNames(
           styles.label,
-          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
+          (!isLabelVisible || inputGroupContext || formLayoutCustomFieldContext) && styles.isLabelHidden,
         )}
         htmlFor={id}
         id={`${id}__labelText`}
@@ -286,6 +290,9 @@ FileInputField.propTypes = {
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
+   *
+   * Automatically set to `false` when the component is rendered within `FormLayoutCustomField`
+   * component.
    */
   isLabelVisible: PropTypes.bool,
   /**
diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx b/src/components/FileInputField/__tests__/FileInputField.spec.tsx
index f474ff97d..b9bc6a0c4 100644
--- a/src/components/FileInputField/__tests__/FileInputField.spec.tsx
+++ b/src/components/FileInputField/__tests__/FileInputField.spec.tsx
@@ -9,6 +9,8 @@ import {
 } from '../../../../tests/playwright';
 import type { FileInputFieldForFormLayoutTestsProps } from './FileInputField.story';
 import {
+  FileInputFieldForFormLayoutCustomFieldTests,
+  FileInputFieldForFormLayoutLabelWidthTests,
   FileInputFieldForFormLayoutTests,
   FileInputFieldForRefTest,
   FileInputFieldForTest,
@@ -314,6 +316,13 @@ test.describe('FileInputField', () => {
 
   test.describe('formLayout', () => {
     test.describe('visual', () => {
+      test('labelWidth:string=100px', async ({ mount }) => {
+        const component = await mount(<FileInputFieldForFormLayoutLabelWidthTests />);
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+
       [
         ...propTests.layoutPropTest,
       ].forEach(({
@@ -346,4 +355,15 @@ test.describe('FileInputField', () => {
       });
     });
   });
+
+  test.describe('formLayoutCustomField', () => {
+    test.describe('visual', () => {
+      test('label:hidden', async ({ mount }) => {
+        const component = await mount(<FileInputFieldForFormLayoutCustomFieldTests />);
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png
new file mode 100644
index 000000000..7eb4e3bfb
Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png differ
diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png
new file mode 100644
index 000000000..a777f7011
Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png differ
diff --git a/src/components/FileInputField/__tests__/FileInputField.story.tsx b/src/components/FileInputField/__tests__/FileInputField.story.tsx
index 62fa17ea4..460bce0b6 100644
--- a/src/components/FileInputField/__tests__/FileInputField.story.tsx
+++ b/src/components/FileInputField/__tests__/FileInputField.story.tsx
@@ -5,7 +5,11 @@ import React, {
 } from 'react';
 import type { HTMLAttributes } from 'react';
 import { FileInputField } from '..';
-import { FormLayoutContext } from '../../FormLayout';
+import {
+  FormLayout,
+  FormLayoutContext,
+  FormLayoutCustomFieldContext,
+} from '../../FormLayout';
 
 // Types for story component will be improved when we have full TypeScript support
 type FileInputFieldForTestProps = HTMLAttributes<HTMLDivElement>;
@@ -99,6 +103,13 @@ export const FileInputFieldForRefTest = ({
   );
 };
 
+export const FileInputFieldForFormLayoutLabelWidthTests = () => (
+  <FormLayout fieldLayout="horizontal" labelWidth="100px">
+    <FileInputField id="testId" label="FirstLabel" onFilesChanged={() => {}} />
+    <FileInputField id="anotherTestId" label="SecondLabel" onFilesChanged={() => {}} />
+  </FormLayout>
+);
+
 export const FileInputFieldForFormLayoutTests = ({
   layout,
   ...props
@@ -126,3 +137,18 @@ export const FileInputFieldForFormLayoutTests = ({
     </FormLayoutContext.Provider>
   );
 };
+
+export const FileInputFieldForFormLayoutCustomFieldTests = ({
+  ...props
+}: FileInputFieldForTestProps) => (
+  <InputWrapper {...props}>
+    <FormLayoutCustomFieldContext.Provider value>
+      <FileInputField
+        id="testId"
+        label="Attachment"
+        onFilesChanged={() => {}}
+        {...props}
+      />
+    </FormLayoutCustomFieldContext.Provider>
+  </InputWrapper>
+);
diff --git a/src/components/FormLayout/FormLayoutCustomField.jsx b/src/components/FormLayout/FormLayoutCustomField.jsx
index 841d4eb16..b68a77490 100644
--- a/src/components/FormLayout/FormLayoutCustomField.jsx
+++ b/src/components/FormLayout/FormLayoutCustomField.jsx
@@ -7,6 +7,7 @@ import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
+import { FormLayoutCustomFieldContext } from './FormLayoutCustomFieldContext';
 import styles from './FormLayoutCustomField.module.scss';
 
 const renderLabel = (id, label, labelForId) => {
@@ -73,7 +74,9 @@ export const FormLayoutCustomField = ({
         className={styles.field}
         id={id && `${id}__field`}
       >
-        {children}
+        <FormLayoutCustomFieldContext.Provider value>
+          {children}
+        </FormLayoutCustomFieldContext.Provider>
       </div>
     </div>
   );
diff --git a/src/components/FormLayout/FormLayoutCustomFieldContext.js b/src/components/FormLayout/FormLayoutCustomFieldContext.js
new file mode 100644
index 000000000..4a584ce8e
--- /dev/null
+++ b/src/components/FormLayout/FormLayoutCustomFieldContext.js
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const FormLayoutCustomFieldContext = React.createContext(null);
diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md
index 88d309539..3e9cb487d 100644
--- a/src/components/FormLayout/README.md
+++ b/src/components/FormLayout/README.md
@@ -330,6 +330,29 @@ and its styles may affect contained form fields through CSS cascade, don't
 forget to mirror the aforementioned properties to the contained form fields too
 as API options as such are **not** inherited.
 
+### Nested Fields Labels
+
+When placing box form fields — TextField, TextArea, SelectField, or
+FileInputField — inside a FormLayoutCustomField, their labels are hidden
+automatically.
+
+```docoff-react-preview
+<FormLayout fieldLayout="horizontal" labelWidth="auto">
+  <FormLayoutCustomField
+    innerFieldSize="medium"
+    label="Custom field with invisible label"
+  >
+    <TextField
+      label="This field's label is hidden"
+    />
+  </FormLayoutCustomField>
+</FormLayout>
+```
+
+ℹ️ Labels are hidden regardless of `fieldLayout`. In a horizontal FormLayout,
+the nested field's own label would conflict with the FormLayout grid and
+produce incorrect alignment, so it is always hidden for consistency.
+
 ### Label Alignment
 
 If you are in a situation with one or more box form fields inside your
@@ -346,7 +369,6 @@ this task.
     label="Custom field label aligned to inner text input"
   >
     <TextField
-      isLabelVisible={false}
       label="A form element"
       placeholder="Text field with invisible label"
     />
@@ -391,7 +413,6 @@ React.createElement(() => {
       >
         <TextField
           id="my-text-field-custom-accessibility"
-          isLabelVisible={false}
           label="A form element"
           placeholder="Text field with invisible label"
         />
diff --git a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-autoWidth-boolean-false-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-autoWidth-boolean-false-1-chromium-linux.png
deleted file mode 100644
index 41f1dd810..000000000
Binary files a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-autoWidth-boolean-false-1-chromium-linux.png and /dev/null differ
diff --git a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-autoWidth-boolean-true-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-autoWidth-boolean-true-1-chromium-linux.png
deleted file mode 100644
index d8d36da10..000000000
Binary files a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-autoWidth-boolean-true-1-chromium-linux.png and /dev/null differ
diff --git a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-defaultComponentProps-object-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-defaultComponentProps-object-1-chromium-linux.png
index 37f6ba34d..8896d223d 100644
Binary files a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-defaultComponentProps-object-1-chromium-linux.png and b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-defaultComponentProps-object-1-chromium-linux.png differ
diff --git a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-fieldLayout-string-horizontal-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-fieldLayout-string-horizontal-1-chromium-linux.png
index a6b5fa9ca..8de1c6bec 100644
Binary files a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-fieldLayout-string-horizontal-1-chromium-linux.png and b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-fieldLayout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-fieldLayout-string-vertical-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-fieldLayout-string-vertical-1-chromium-linux.png
index 37f6ba34d..8896d223d 100644
Binary files a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-fieldLayout-string-vertical-1-chromium-linux.png and b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-fieldLayout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-100px-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-100px-1-chromium-linux.png
new file mode 100644
index 000000000..a1b1cc09a
Binary files /dev/null and b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-100px-1-chromium-linux.png differ
diff --git a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-30px-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-30px-1-chromium-linux.png
deleted file mode 100644
index d060a1b0c..000000000
Binary files a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-30px-1-chromium-linux.png and /dev/null differ
diff --git a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-auto-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-auto-1-chromium-linux.png
index 621344a48..247c00c66 100644
Binary files a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-auto-1-chromium-linux.png and b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-auto-1-chromium-linux.png differ
diff --git a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-default-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-default-1-chromium-linux.png
index a6b5fa9ca..8de1c6bec 100644
Binary files a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-default-1-chromium-linux.png and b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-default-1-chromium-linux.png differ
diff --git a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-limited-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-limited-1-chromium-linux.png
index e6d48871a..23df0d3a3 100644
Binary files a/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-limited-1-chromium-linux.png and b/src/components/FormLayout/__tests__/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-limited-1-chromium-linux.png differ
diff --git a/src/components/FormLayout/__tests__/FormLayout.story.tsx b/src/components/FormLayout/__tests__/FormLayout.story.tsx
index 97bd7afaa..45c8b5809 100644
--- a/src/components/FormLayout/__tests__/FormLayout.story.tsx
+++ b/src/components/FormLayout/__tests__/FormLayout.story.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import type { HTMLAttributes } from 'react';
-import {
-  FormLayout,
-  FormLayoutCustomField,
-} from '..';
-import { TextField } from '../../TextField';
+import { Button } from '../../Button';
 import { CheckboxField } from '../../CheckboxField';
 import { FileInputField } from '../../FileInputField';
 import { Radio } from '../../Radio';
 import { SelectField } from '../../SelectField';
 import { TextArea } from '../../TextArea';
+import { TextField } from '../../TextField';
 import { Toggle } from '../../Toggle';
+import {
+  FormLayout,
+  FormLayoutCustomField,
+} from '..';
 
 // Types for story component will be improved when we have full TypeScript support
 type FormLayoutForTestProps = HTMLAttributes<HTMLDivElement>;
@@ -69,6 +70,7 @@ export const FormLayoutForTest = ({
       <TextField label="Label7" />
     </FormLayoutCustomField>
     <FileInputField label="Attachment label 8" />
+    <Button label="Submit" />
   </FormLayout>
 );
 
diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-labelVisible-boolean-false-fieldLayout-string-horizontal-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-fieldLayout-string-horizontal-1-chromium-linux.png
similarity index 100%
rename from src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-labelVisible-boolean-false-fieldLayout-string-horizontal-1-chromium-linux.png
rename to src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-fieldLayout-string-horizontal-1-chromium-linux.png
diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-labelVisible-boolean-false-fieldLayout-string-vertical-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-fieldLayout-string-vertical-1-chromium-linux.png
similarity index 100%
rename from src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-labelVisible-boolean-false-fieldLayout-string-vertical-1-chromium-linux.png
rename to src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-fieldLayout-string-vertical-1-chromium-linux.png
diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-labelVisible-boolean-true-fieldLayout-string-horizontal-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-labelVisible-boolean-true-fieldLayout-string-horizontal-1-chromium-linux.png
deleted file mode 100644
index 0f3069141..000000000
Binary files a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-labelVisible-boolean-true-fieldLayout-string-horizontal-1-chromium-linux.png and /dev/null differ
diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-labelVisible-boolean-true-fieldLayout-string-vertical-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-labelVisible-boolean-true-fieldLayout-string-vertical-1-chromium-linux.png
deleted file mode 100644
index 0cac6f170..000000000
Binary files a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-labelVisible-boolean-true-fieldLayout-string-vertical-1-chromium-linux.png and /dev/null differ
diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.story.tsx b/src/components/FormLayout/__tests__/FormLayoutCustomField.story.tsx
index 53d84344e..78593f065 100644
--- a/src/components/FormLayout/__tests__/FormLayoutCustomField.story.tsx
+++ b/src/components/FormLayout/__tests__/FormLayoutCustomField.story.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import type { HTMLAttributes } from 'react';
+import { TextField } from '../../TextField';
 import {
   FormLayout,
   FormLayoutCustomField,
 } from '..';
-import { TextField } from '../../TextField';
+
 // Types for story component will be improved when we have full TypeScript support
 type FormLayoutForTestProps = HTMLAttributes<HTMLDivElement>;
 type FormLayoutCustomFieldForTestProps = FormLayoutForTestProps & {
diff --git a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldFullWidthPropTest.ts b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldFullWidthPropTest.ts
index 7ae03f067..93c7ef079 100644
--- a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldFullWidthPropTest.ts
+++ b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldFullWidthPropTest.ts
@@ -10,7 +10,6 @@ const customFieldLayoutBaseProps = {
 };
 
 const customFieldBaseProps = {
-  isLabelVisible: false,
   label: 'Custom field label',
 };
 
diff --git a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldLabelAlignmentPropTest.ts b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldLabelAlignmentPropTest.ts
index 6a67c7749..7a9741c89 100644
--- a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldLabelAlignmentPropTest.ts
+++ b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldLabelAlignmentPropTest.ts
@@ -17,37 +17,17 @@ export const customFieldLabelAlignmentPropTest: CustomFieldTestsType = [
   {
     customFieldLayoutProps: customFieldLayoutBaseProps,
     customFieldProps: {
-      isLabelVisible: true,
       label: 'Custom field label',
     },
-    name: 'labelVisible:boolean=true fieldLayout:string=horizontal',
+    name: 'fieldLayout:string=horizontal',
     props: formLayoutHorizontalBaseProps,
   },
   {
     customFieldLayoutProps: customFieldLayoutBaseProps,
     customFieldProps: {
-      isLabelVisible: false,
       label: 'Custom field label',
     },
-    name: 'labelVisible:boolean=false fieldLayout:string=horizontal',
-    props: formLayoutHorizontalBaseProps,
-  },
-  {
-    customFieldLayoutProps: customFieldLayoutBaseProps,
-    customFieldProps: {
-      isLabelVisible: true,
-      label: 'Custom field label',
-    },
-    name: 'labelVisible:boolean=true fieldLayout:string=vertical',
-    props: formLayoutVerticalBaseProps,
-  },
-  {
-    customFieldLayoutProps: customFieldLayoutBaseProps,
-    customFieldProps: {
-      isLabelVisible: false,
-      label: 'Custom field label',
-    },
-    name: 'labelVisible:boolean=false fieldLayout:string=vertical',
+    name: 'fieldLayout:string=vertical',
     props: formLayoutVerticalBaseProps,
   },
 ];
diff --git a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldRequiredPropTest.ts b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldRequiredPropTest.ts
index 269943a69..c8f71b419 100644
--- a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldRequiredPropTest.ts
+++ b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldRequiredPropTest.ts
@@ -10,7 +10,6 @@ const customFieldLayoutBaseProps = {
 };
 
 const customFieldBaseProps = {
-  isLabelVisible: false,
   label: 'Custom field label',
 };
 
diff --git a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesDisabledPropTest.ts b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesDisabledPropTest.ts
index 6ed7a0d0d..33f6dd752 100644
--- a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesDisabledPropTest.ts
+++ b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesDisabledPropTest.ts
@@ -9,7 +9,6 @@ export const customFieldValidationStatesDisabledPropTest: CustomFieldTestsType =
       ...propTest.props,
     },
     customFieldProps: {
-      isLabelVisible: false,
       label: 'Custom field label',
     },
     name: `${propTest.name} disabled:boolean=true`,
diff --git a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesPropTest.ts b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesPropTest.ts
index bcaa9c22a..159dc404c 100644
--- a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesPropTest.ts
+++ b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesPropTest.ts
@@ -9,7 +9,6 @@ export const customFieldValidationStatesPropTest: CustomFieldTestsType = validat
       ...propTest.props,
     },
     customFieldProps: {
-      isLabelVisible: false,
       label: 'Custom field label',
     },
     name: propTest.name,
diff --git a/src/components/FormLayout/__tests__/_propTests/labelWidthPropTest.ts b/src/components/FormLayout/__tests__/_propTests/labelWidthPropTest.ts
index f79e8c916..072996c42 100644
--- a/src/components/FormLayout/__tests__/_propTests/labelWidthPropTest.ts
+++ b/src/components/FormLayout/__tests__/_propTests/labelWidthPropTest.ts
@@ -23,10 +23,10 @@ export const labelWidthPropTest: PropTests = [
     },
   },
   {
-    name: 'labelWidth:string=30px',
+    name: 'labelWidth:string=100px',
     props: {
       fieldLayout: 'horizontal',
-      labelWidth: '30px',
+      labelWidth: '100px',
     },
   },
 ];
diff --git a/src/components/FormLayout/index.js b/src/components/FormLayout/index.js
index 3ef25c2a5..17d50e4cc 100644
--- a/src/components/FormLayout/index.js
+++ b/src/components/FormLayout/index.js
@@ -1,3 +1,4 @@
 export { default as FormLayout } from './FormLayout';
 export { FormLayoutContext } from './FormLayoutContext';
+export { FormLayoutCustomFieldContext } from './FormLayoutCustomFieldContext';
 export { default as FormLayoutCustomField } from './FormLayoutCustomField';
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx b/src/components/Radio/__tests__/Radio.spec.tsx
index f8ce464c6..7bd0693da 100644
--- a/src/components/Radio/__tests__/Radio.spec.tsx
+++ b/src/components/Radio/__tests__/Radio.spec.tsx
@@ -8,11 +8,12 @@ import {
   propTests,
 } from '../../../../tests/playwright';
 import { partialDisabledOptionsPropTest } from './_propTests/partialDisabledOptionsPropTest';
+import type { RadioForFormLayoutTestsProps } from './Radio.story';
 import {
-  RadioForTest,
+  RadioForFormLayoutLabelWidthTests,
   RadioForFormLayoutTests,
+  RadioForTest,
 } from './Radio.story';
-import type { RadioForFormLayoutTestsProps } from './Radio.story';
 
 const options = [
   {
@@ -158,6 +159,13 @@ test.describe('Radio', () => {
 
   test.describe('formLayout', () => {
     test.describe('visual', () => {
+      test('labelWidth:string=100px', async ({ mount }) => {
+        const component = await mount(<RadioForFormLayoutLabelWidthTests />);
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+
       [
         ...propTests.layoutPropTest,
       ].forEach(({
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png
new file mode 100644
index 000000000..12d866f07
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.story.tsx b/src/components/Radio/__tests__/Radio.story.tsx
index a063f856e..3d36e9911 100644
--- a/src/components/Radio/__tests__/Radio.story.tsx
+++ b/src/components/Radio/__tests__/Radio.story.tsx
@@ -1,7 +1,10 @@
 import React, { useMemo } from 'react';
 import type { InputHTMLAttributes } from 'react';
 import { Radio } from '..';
-import { FormLayoutContext } from '../../FormLayout';
+import {
+  FormLayout,
+  FormLayoutContext,
+} from '../../FormLayout';
 
 // Types for story component will be improved when we have full TypeScript support
 type RadioForTestProps = InputHTMLAttributes<HTMLInputElement>;
@@ -37,6 +40,13 @@ export const RadioForTest = ({
   />
 );
 
+export const RadioForFormLayoutLabelWidthTests = () => (
+  <FormLayout fieldLayout="horizontal" labelWidth="100px">
+    <Radio label={defaultLabel} options={defaultOptions} />
+    <Radio label="another-test-label" options={defaultOptions} />
+  </FormLayout>
+);
+
 export const RadioForFormLayoutTests = ({
   layout,
   ...props
diff --git a/src/components/SelectField/SelectField.jsx b/src/components/SelectField/SelectField.jsx
index d8f3865b8..85ef581fb 100644
--- a/src/components/SelectField/SelectField.jsx
+++ b/src/components/SelectField/SelectField.jsx
@@ -6,7 +6,10 @@ import { transferProps } from '../../helpers/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
-import { FormLayoutContext } from '../FormLayout';
+import {
+  FormLayoutContext,
+  FormLayoutCustomFieldContext,
+} from '../FormLayout';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import { Option } from './_components/Option';
 import styles from './SelectField.module.scss';
@@ -31,6 +34,7 @@ export const SelectField = React.forwardRef((props, ref) => {
   } = props;
 
   const formLayoutContext = useContext(FormLayoutContext);
+  const formLayoutCustomFieldContext = useContext(FormLayoutCustomFieldContext);
   const inputGroupContext = useContext(InputGroupContext);
 
   return (
@@ -58,7 +62,7 @@ export const SelectField = React.forwardRef((props, ref) => {
       <div
         className={classNames(
           styles.label,
-          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
+          (!isLabelVisible || inputGroupContext || formLayoutCustomFieldContext) && styles.isLabelHidden,
         )}
         id={id && `${id}__labelText`}
       >
@@ -181,7 +185,8 @@ SelectField.propTypes = {
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
    *
-   * Automatically set to `false` when the component is rendered within `InputGroup` component.
+   * Automatically set to `false` when the component is rendered within `InputGroup` or
+   * `FormLayoutCustomField` component.
    */
   isLabelVisible: PropTypes.bool,
   /**
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx b/src/components/SelectField/__tests__/SelectField.spec.tsx
index 65fb8bc40..e9608d21f 100644
--- a/src/components/SelectField/__tests__/SelectField.spec.tsx
+++ b/src/components/SelectField/__tests__/SelectField.spec.tsx
@@ -7,12 +7,14 @@ import {
   mixPropTests,
   propTests,
 } from '../../../../tests/playwright';
+import type { SelectFieldForFormLayoutTestsProps } from './SelectField.story';
 import {
-  SelectFieldForTest,
-  SelectFieldForRefTest,
+  SelectFieldForFormLayoutCustomFieldTests,
+  SelectFieldForFormLayoutLabelWidthTests,
   SelectFieldForFormLayoutTests,
+  SelectFieldForRefTest,
+  SelectFieldForTest,
 } from './SelectField.story';
-import type { SelectFieldForFormLayoutTestsProps } from './SelectField.story';
 import { openSelectFieldOptionsTest } from './_propTests/openSelectFieldOptionsTest';
 
 const groupedOptions = [
@@ -266,6 +268,13 @@ test.describe('SelectField', () => {
 
   test.describe('formLayout', () => {
     test.describe('visual', () => {
+      test('labelWidth:string=100px', async ({ mount }) => {
+        const component = await mount(<SelectFieldForFormLayoutLabelWidthTests />);
+
+        const screenshot = await component.screenshot({ animations: 'disabled' });
+        expect(screenshot).toMatchSnapshot();
+      });
+
       [
         ...propTests.layoutPropTest,
       ].forEach(({
@@ -298,4 +307,15 @@ test.describe('SelectField', () => {
       });
     });
   });
+
+  test.describe('formLayoutCustomField', () => {
+    test.describe('visual', () => {
+      test('label:hidden', async ({ mount }) => {
+        const component = await mount(<SelectFieldForFormLayoutCustomFieldTests />);
+
+        const screenshot = await component.screenshot({ animations: 'disabled' });
+        expect(screenshot).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png
new file mode 100644
index 000000000..6c84413f4
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png
new file mode 100644
index 000000000..6d171fab1
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.story.tsx b/src/components/SelectField/__tests__/SelectField.story.tsx
index 67964723f..0c975f189 100644
--- a/src/components/SelectField/__tests__/SelectField.story.tsx
+++ b/src/components/SelectField/__tests__/SelectField.story.tsx
@@ -4,7 +4,11 @@ import React, {
   useRef,
 } from 'react';
 import type { InputHTMLAttributes } from 'react';
-import { FormLayoutContext } from '../../FormLayout';
+import {
+  FormLayout,
+  FormLayoutContext,
+  FormLayoutCustomFieldContext,
+} from '../../FormLayout';
 import { SelectField } from '..';
 
 type SelectFieldForTestProps = InputHTMLAttributes<HTMLSelectElement>;
@@ -63,6 +67,13 @@ export const SelectFieldForRefTest = ({
   );
 };
 
+export const SelectFieldForFormLayoutLabelWidthTests = () => (
+  <FormLayout fieldLayout="horizontal" labelWidth="100px">
+    <SelectField label={defaultLabel} options={defaultOptions} />
+    <SelectField label="another-test-label" options={defaultOptions} />
+  </FormLayout>
+);
+
 export const SelectFieldForFormLayoutTests = ({
   layout,
   ...props
@@ -86,3 +97,15 @@ export const SelectFieldForFormLayoutTests = ({
     </FormLayoutContext.Provider>
   );
 };
+
+export const SelectFieldForFormLayoutCustomFieldTests = ({
+  ...props
+}: SelectFieldForTestProps) => (
+  <FormLayoutCustomFieldContext.Provider value>
+    <SelectField
+      label={defaultLabel}
+      options={defaultOptions}
+      {...props}
+    />
+  </FormLayoutCustomFieldContext.Provider>
+);
diff --git a/src/components/TextArea/TextArea.jsx b/src/components/TextArea/TextArea.jsx
index 9eb17e8e2..e7ac0bf17 100644
--- a/src/components/TextArea/TextArea.jsx
+++ b/src/components/TextArea/TextArea.jsx
@@ -6,7 +6,10 @@ import { transferProps } from '../../helpers/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
-import { FormLayoutContext } from '../FormLayout';
+import {
+  FormLayoutContext,
+  FormLayoutCustomFieldContext,
+} from '../FormLayout';
 import styles from './TextArea.module.scss';
 
 export const TextArea = React.forwardRef((props, ref) => {
@@ -27,6 +30,7 @@ export const TextArea = React.forwardRef((props, ref) => {
   } = props;
 
   const context = useContext(FormLayoutContext);
+  const formLayoutCustomFieldContext = useContext(FormLayoutCustomFieldContext);
 
   return (
     <label
@@ -49,7 +53,7 @@ export const TextArea = React.forwardRef((props, ref) => {
       <div
         className={classNames(
           styles.label,
-          !isLabelVisible && styles.isLabelHidden,
+          (!isLabelVisible || formLayoutCustomFieldContext) && styles.isLabelHidden,
         )}
         id={id && `${id}__labelText`}
       >
@@ -127,6 +131,9 @@ TextArea.propTypes = {
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
+   *
+   * Automatically set to `false` when the component is rendered within `FormLayoutCustomField`
+   * component.
    */
   isLabelVisible: PropTypes.bool,
   /**
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx b/src/components/TextArea/__tests__/TextArea.spec.tsx
index 3dca0ff32..8f63b45d1 100644
--- a/src/components/TextArea/__tests__/TextArea.spec.tsx
+++ b/src/components/TextArea/__tests__/TextArea.spec.tsx
@@ -7,12 +7,14 @@ import {
   mixPropTests,
   propTests,
 } from '../../../../tests/playwright';
+import type { TextAreaForFormLayoutTestsProps } from './TextArea.story';
 import {
-  TextAreaForTest,
-  TextAreaForRefTest,
+  TextAreaForFormLayoutCustomFieldTests,
+  TextAreaForFormLayoutLabelWidthTests,
   TextAreaForFormLayoutTests,
+  TextAreaForRefTest,
+  TextAreaForTest,
 } from './TextArea.story';
-import type { TextAreaForFormLayoutTestsProps } from './TextArea.story';
 
 test.describe('TextArea', () => {
   test.describe('base', () => {
@@ -124,6 +126,13 @@ test.describe('TextArea', () => {
 
   test.describe('formLayout', () => {
     test.describe('visual', () => {
+      test('labelWidth:string=100px', async ({ mount }) => {
+        const component = await mount(<TextAreaForFormLayoutLabelWidthTests />);
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+
       [
         ...propTests.layoutPropTest,
       ].forEach(({
@@ -156,4 +165,15 @@ test.describe('TextArea', () => {
       });
     });
   });
+
+  test.describe('formLayoutCustomField', () => {
+    test.describe('visual', () => {
+      test('label:hidden', async ({ mount }) => {
+        const component = await mount(<TextAreaForFormLayoutCustomFieldTests />);
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png
new file mode 100644
index 000000000..8ae18e767
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png
new file mode 100644
index 000000000..de6a9d493
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.story.tsx b/src/components/TextArea/__tests__/TextArea.story.tsx
index daab773e1..70420fe13 100644
--- a/src/components/TextArea/__tests__/TextArea.story.tsx
+++ b/src/components/TextArea/__tests__/TextArea.story.tsx
@@ -4,7 +4,11 @@ import React, {
   useRef,
 } from 'react';
 import type { TextareaHTMLAttributes } from 'react';
-import { FormLayoutContext } from '../../FormLayout';
+import {
+  FormLayout,
+  FormLayoutContext,
+  FormLayoutCustomFieldContext,
+} from '../../FormLayout';
 import { TextArea } from '..';
 
 // Types for story component will be improved when we have full TypeScript support
@@ -48,6 +52,13 @@ export const TextAreaForRefTest = ({
   );
 };
 
+export const TextAreaForFormLayoutLabelWidthTests = () => (
+  <FormLayout fieldLayout="horizontal" labelWidth="100px">
+    <TextArea label={defaultLabel} />
+    <TextArea label="another-test-label" />
+  </FormLayout>
+);
+
 export const TextAreaForFormLayoutTests = ({
   layout,
   ...props
@@ -69,3 +80,14 @@ export const TextAreaForFormLayoutTests = ({
     </FormLayoutContext.Provider>
   );
 };
+
+export const TextAreaForFormLayoutCustomFieldTests = ({
+  ...props
+}: TextAreaForTestProps) => (
+  <FormLayoutCustomFieldContext.Provider value>
+    <TextArea
+      label={defaultLabel}
+      {...props}
+    />
+  </FormLayoutCustomFieldContext.Provider>
+);
diff --git a/src/components/TextField/TextField.jsx b/src/components/TextField/TextField.jsx
index 2609011f1..ec2c4a6de 100644
--- a/src/components/TextField/TextField.jsx
+++ b/src/components/TextField/TextField.jsx
@@ -6,7 +6,10 @@ import { transferProps } from '../../helpers/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
-import { FormLayoutContext } from '../FormLayout';
+import {
+  FormLayoutContext,
+  FormLayoutCustomFieldContext,
+} from '../FormLayout';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import styles from './TextField.module.scss';
 
@@ -31,6 +34,7 @@ export const TextField = React.forwardRef((props, ref) => {
     ...restProps
   } = props;
   const formLayoutContext = useContext(FormLayoutContext);
+  const formLayoutCustomFieldContext = useContext(FormLayoutCustomFieldContext);
   const inputGroupContext = useContext(InputGroupContext);
   const hasSmallInput = (inputSize !== undefined) && (inputSize <= SMALL_INPUT_SIZE);
 
@@ -62,7 +66,7 @@ export const TextField = React.forwardRef((props, ref) => {
       <div
         className={classNames(
           styles.label,
-          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
+          (!isLabelVisible || inputGroupContext || formLayoutCustomFieldContext) && styles.isLabelHidden,
         )}
         id={id && `${id}__labelText`}
       >
@@ -153,7 +157,8 @@ TextField.propTypes = {
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
    *
-   * Automatically set to `false` when the component is rendered within `InputGroup` component.
+   * Automatically set to `false` when the component is rendered within `InputGroup` or
+   * `FormLayoutCustomField` component.
    */
   isLabelVisible: PropTypes.bool,
   /**
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx b/src/components/TextField/__tests__/TextField.spec.tsx
index 80092990d..417d19603 100644
--- a/src/components/TextField/__tests__/TextField.spec.tsx
+++ b/src/components/TextField/__tests__/TextField.spec.tsx
@@ -7,12 +7,14 @@ import {
   mixPropTests,
   propTests,
 } from '../../../../tests/playwright';
+import type { TextFieldForFormLayoutTestsProps } from './TextField.story';
 import {
-  TextFieldForTest,
-  TextFieldForRefTest,
+  TextFieldForFormLayoutCustomFieldTests,
+  TextFieldForFormLayoutLabelWidthTests,
   TextFieldForFormLayoutTests,
+  TextFieldForRefTest,
+  TextFieldForTest,
 } from './TextField.story';
-import type { TextFieldForFormLayoutTestsProps } from './TextField.story';
 import { inputSizePropTest } from './_propTests/inputSizePropTest';
 import { typePropTest } from './_propTests/typePropTest';
 
@@ -164,6 +166,13 @@ test.describe('TextField', () => {
 
   test.describe('formLayout', () => {
     test.describe('visual', () => {
+      test('labelWidth:string=100px', async ({ mount }) => {
+        const component = await mount(<TextFieldForFormLayoutLabelWidthTests />);
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+
       [
         ...propTests.layoutPropTest,
       ].forEach(({
@@ -196,4 +205,15 @@ test.describe('TextField', () => {
       });
     });
   });
+
+  test.describe('formLayoutCustomField', () => {
+    test.describe('visual', () => {
+      test('label:hidden', async ({ mount }) => {
+        const component = await mount(<TextFieldForFormLayoutCustomFieldTests />);
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png
new file mode 100644
index 000000000..44579bc75
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png
new file mode 100644
index 000000000..8b0220cc9
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.story.tsx b/src/components/TextField/__tests__/TextField.story.tsx
index d024862e7..0b1b2dab4 100644
--- a/src/components/TextField/__tests__/TextField.story.tsx
+++ b/src/components/TextField/__tests__/TextField.story.tsx
@@ -4,7 +4,11 @@ import React, {
   useRef,
 } from 'react';
 import type { InputHTMLAttributes } from 'react';
-import { FormLayoutContext } from '../../FormLayout';
+import {
+  FormLayout,
+  FormLayoutContext,
+  FormLayoutCustomFieldContext,
+} from '../../FormLayout';
 import { TextField } from '..';
 
 // Types for story component will be improved when we have full TypeScript support
@@ -48,6 +52,13 @@ export const TextFieldForRefTest = ({
   );
 };
 
+export const TextFieldForFormLayoutLabelWidthTests = () => (
+  <FormLayout fieldLayout="horizontal" labelWidth="100px">
+    <TextField label={defaultLabel} />
+    <TextField label="another-test-label" />
+  </FormLayout>
+);
+
 export const TextFieldForFormLayoutTests = ({
   layout,
   ...props
@@ -69,3 +80,14 @@ export const TextFieldForFormLayoutTests = ({
     </FormLayoutContext.Provider>
   );
 };
+
+export const TextFieldForFormLayoutCustomFieldTests = ({
+  ...props
+}: TextFieldForTestProps) => (
+  <FormLayoutCustomFieldContext.Provider value>
+    <TextField
+      label={defaultLabel}
+      {...props}
+    />
+  </FormLayoutCustomFieldContext.Provider>
+);
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx b/src/components/Toggle/__tests__/Toggle.spec.tsx
index 8ba3a87a9..50845b4e7 100644
--- a/src/components/Toggle/__tests__/Toggle.spec.tsx
+++ b/src/components/Toggle/__tests__/Toggle.spec.tsx
@@ -7,12 +7,13 @@ import {
   mixPropTests,
   propTests,
 } from '../../../../tests/playwright';
+import type { ToggleForFormLayoutTestsProps } from './Toggle.story';
 import {
-  ToggleForTest,
-  ToggleForRefTest,
+  ToggleForFormLayoutLabelWidthTests,
   ToggleForFormLayoutTests,
+  ToggleForRefTest,
+  ToggleForTest,
 } from './Toggle.story';
-import type { ToggleForFormLayoutTestsProps } from './Toggle.story';
 
 test.describe('Toggle', () => {
   test.describe('base', () => {
@@ -142,6 +143,13 @@ test.describe('Toggle', () => {
 
   test.describe('formLayout', () => {
     test.describe('visual', () => {
+      test('labelWidth:string=100px', async ({ mount }) => {
+        const component = await mount(<ToggleForFormLayoutLabelWidthTests />);
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+
       [
         ...propTests.layoutPropTest,
       ].forEach(({
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png
new file mode 100644
index 000000000..ea0187370
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.story.tsx b/src/components/Toggle/__tests__/Toggle.story.tsx
index 5fd392f57..a9c65b4e7 100644
--- a/src/components/Toggle/__tests__/Toggle.story.tsx
+++ b/src/components/Toggle/__tests__/Toggle.story.tsx
@@ -4,7 +4,10 @@ import React, {
   useRef,
 } from 'react';
 import type { InputHTMLAttributes } from 'react';
-import { FormLayoutContext } from '../../FormLayout';
+import {
+  FormLayout,
+  FormLayoutContext,
+} from '../../FormLayout';
 import { Toggle } from '..';
 
 // Types for story component will be improved when we have full TypeScript support
@@ -48,6 +51,13 @@ export const ToggleForRefTest = ({
   );
 };
 
+export const ToggleForFormLayoutLabelWidthTests = () => (
+  <FormLayout fieldLayout="horizontal" labelWidth="100px">
+    <Toggle label={defaultLabel} />
+    <Toggle label="another-test-label" />
+  </FormLayout>
+);
+
 export const ToggleForFormLayoutTests = ({
   layout,
   ...props