diff --git a/src/components/InputGroup/InputGroup.jsx b/src/components/InputGroup/InputGroup.jsx
index b65cb3a3d..2801a06d2 100644
--- a/src/components/InputGroup/InputGroup.jsx
+++ b/src/components/InputGroup/InputGroup.jsx
@@ -39,7 +39,7 @@ export const InputGroup = ({
return null;
}
- const validationState = children.reduce(
+ const validationState = React.Children.toArray(children).reduce(
(state, child) => {
if (state === 'invalid' || (state === 'warning' && child.props.validationState === 'valid')) {
return state;
diff --git a/src/components/InputGroup/__tests__/InputGroup.spec.tsx b/src/components/InputGroup/__tests__/InputGroup.spec.tsx
index bc9d59b2d..974b09fa1 100644
--- a/src/components/InputGroup/__tests__/InputGroup.spec.tsx
+++ b/src/components/InputGroup/__tests__/InputGroup.spec.tsx
@@ -9,6 +9,7 @@ import {
InputGroupWithCustomInputPropsForTest,
InputGroupWithoutChildrenForTest,
} from './InputGroup.story';
+import { childrenPropTest } from './_propTests/childrenPropTest';
import { validationTextsPropTest } from './_propTests/validationTextsPropTest';
import { validationStatePropTest } from './_propTests/validationStatePropTest';
@@ -17,6 +18,7 @@ test.describe('InputGroup', () => {
test.describe('visual', () => {
[
...propTests.defaultComponentPropTest,
+ ...childrenPropTest,
...propTests.disabledPropTest,
...propTests.isLabelVisiblePropTest,
...propTests.layoutPropTest,
diff --git a/src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-multiple-1-chromium-linux.png b/src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-multiple-1-chromium-linux.png
new file mode 100644
index 000000000..c925b6a55
Binary files /dev/null and b/src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-multiple-1-chromium-linux.png differ
diff --git a/src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-single-1-chromium-linux.png b/src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-single-1-chromium-linux.png
new file mode 100644
index 000000000..f3c08c058
Binary files /dev/null and b/src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-single-1-chromium-linux.png differ
diff --git a/src/components/InputGroup/__tests__/InputGroup.story.tsx b/src/components/InputGroup/__tests__/InputGroup.story.tsx
index c1c3b1b1b..bd6f6ed27 100644
--- a/src/components/InputGroup/__tests__/InputGroup.story.tsx
+++ b/src/components/InputGroup/__tests__/InputGroup.story.tsx
@@ -26,20 +26,30 @@ const options = [
},
];
+const defaultChildren = [
+ ,
+ ,
+ ,
+];
+
export const InputGroupForTest = ({
+ children,
...props
}: InputGroupTestProps) => (
-
-
-
+ {children ?? defaultChildren}
);
diff --git a/src/components/InputGroup/__tests__/_propTests/childrenPropTest.tsx b/src/components/InputGroup/__tests__/_propTests/childrenPropTest.tsx
new file mode 100644
index 000000000..3a2277352
--- /dev/null
+++ b/src/components/InputGroup/__tests__/_propTests/childrenPropTest.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import type { PropTests } from '../../../../../tests/playwright/types';
+import { ButtonWithGlobalProps as Button } from '../../../Button/Button';
+import { SelectFieldWithGlobalProps as SelectField } from '../../../SelectField/SelectField';
+import { TextFieldWithGlobalProps as TextField } from '../../../TextField/TextField';
+
+const options = [
+ {
+ label: 'Option 1',
+ value: 'option1',
+ },
+ {
+ label: 'Option 2',
+ value: 'option2',
+ },
+ {
+ label: 'Option 3',
+ value: 'option3',
+ },
+];
+
+export const childrenPropTest: PropTests = [
+ {
+ name: 'children:node[single]',
+ props: {
+ children: (
+
+ ),
+ },
+ },
+ {
+ name: 'children:node[multiple]',
+ props: {
+ children: [
+ ,
+ ,
+ ,
+ ],
+ },
+ },
+];