diff --git a/CHANGELOG.md b/CHANGELOG.md
index d887b45217e..4afd96facf4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
## [`master`](https://github.com/elastic/eui/tree/master)
-No public interface changes since `12.1.0`.
+**Bug fixes**
+- Added requirement that `EuiFormRow` has exactly one child element [#2054](https://github.com/elastic/eui/pull/2054)
## [`12.1.0`](https://github.com/elastic/eui/tree/v12.1.0)
diff --git a/src/components/form/form_row/form_row.js b/src/components/form/form_row/form_row.js
index d42d41d1392..79835cb54df 100644
--- a/src/components/form/form_row/form_row.js
+++ b/src/components/form/form_row/form_row.js
@@ -1,4 +1,4 @@
-import React, { cloneElement, Component } from 'react';
+import React, { cloneElement, Component, Children } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
@@ -155,7 +155,7 @@ export class EuiFormRow extends Component {
optionalProps['aria-describedby'] = describingIds.join(' ');
}
- let field = cloneElement(children, {
+ let field = cloneElement(Children.only(children), {
id,
onFocus: this.onFocus,
onBlur: this.onBlur,
@@ -186,7 +186,7 @@ export class EuiFormRow extends Component {
}
EuiFormRow.propTypes = {
- children: PropTypes.node.isRequired,
+ children: PropTypes.element.isRequired,
className: PropTypes.string,
label: PropTypes.node,
/**
diff --git a/src/components/form/form_row/form_row.test.js b/src/components/form/form_row/form_row.test.js
index 130d18752bf..c32f7d24ac2 100644
--- a/src/components/form/form_row/form_row.test.js
+++ b/src/components/form/form_row/form_row.test.js
@@ -18,6 +18,19 @@ describe('EuiFormRow', () => {
expect(component).toMatchSnapshot();
});
+ test('no children is an error', () => {
+ expect(() => ).toThrow();
+ });
+
+ test('two children is an error', () => {
+ expect(() => (
+
+
+
+
+ )).toThrow();
+ });
+
test('ties together parts for accessibility', () => {
const props = {
label: 'Label',
diff --git a/src/components/form/form_row/index.d.ts b/src/components/form/form_row/index.d.ts
index 89ed398e5ff..93aadba7221 100644
--- a/src/components/form/form_row/index.d.ts
+++ b/src/components/form/form_row/index.d.ts
@@ -1,6 +1,11 @@
import { CommonProps, ExclusiveUnion } from '../../common';
-import { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
+import {
+ FunctionComponent,
+ ReactNode,
+ ReactElement,
+ HTMLAttributes,
+} from 'react';
declare module '@elastic/eui' {
/**
@@ -29,7 +34,9 @@ declare module '@elastic/eui' {
} & EuiFormRowCommonProps &
HTMLAttributes;
- export type EuiFormRowProps = ExclusiveUnion;
+ export type EuiFormRowProps = ExclusiveUnion & {
+ children: ReactElement;
+ };
export const EuiFormRow: FunctionComponent;
}