diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3e346240b73..c610074570f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `tableCaption` prop to `EuiBasicTable` and improved the default one ([#2782](https://github.com/elastic/eui/pull/2782))
+- Converted `EuiDescribedFormGroup` to TypeScript ([#2810](https://github.com/elastic/eui/pull/2810))
 - Changed SASS comments to non-compiled comments in invisibles files ([#2807](https://github.com/elastic/eui/pull/2807))
 
 ## [`18.3.0`](https://github.com/elastic/eui/tree/v18.3.0)
diff --git a/src/components/flex/flex_group.tsx b/src/components/flex/flex_group.tsx
index 895db2d7278..50588ce2a60 100644
--- a/src/components/flex/flex_group.tsx
+++ b/src/components/flex/flex_group.tsx
@@ -28,6 +28,7 @@ const gutterSizeToClassNameMap = {
 };
 
 export const GUTTER_SIZES = keysOf(gutterSizeToClassNameMap);
+export type EuiFlexGroupGutterSize = keyof typeof gutterSizeToClassNameMap;
 
 const alignItemsToClassNameMap = {
   stretch: null,
diff --git a/src/components/flex/index.ts b/src/components/flex/index.ts
index b99ac168275..1f4b0660279 100644
--- a/src/components/flex/index.ts
+++ b/src/components/flex/index.ts
@@ -1,4 +1,4 @@
-export { EuiFlexGroup } from './flex_group';
+export { EuiFlexGroup, EuiFlexGroupGutterSize } from './flex_group';
 
 export { EuiFlexGrid } from './flex_grid';
 
diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
similarity index 96%
rename from src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
rename to src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
index 3e2ad107f75..ab5e77d8b1a 100644
--- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
+++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
@@ -6,14 +6,11 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
   className="testClass1 testClass2"
   data-test-subj="test subject string"
   description="Test description"
-  fullWidth={false}
-  gutterSize="l"
   title={
     <h3>
       Title
     </h3>
   }
-  titleSize="xs"
 >
   <EuiInnerText>
     <fieldset
@@ -38,9 +35,7 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
             <div
               className="euiFlexItem"
             >
-              <span
-                title="Title"
-              >
+              <span>
                 <EuiTitle
                   aria-hidden="true"
                   className="euiDescribedFormGroup__title"
@@ -119,14 +114,11 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p
   aria-label="aria-label"
   className="testClass1 testClass2"
   data-test-subj="test subject string"
-  fullWidth={false}
-  gutterSize="l"
   title={
     <h3>
       Title
     </h3>
   }
-  titleSize="xs"
 >
   <EuiInnerText>
     <fieldset
@@ -151,9 +143,7 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p
             <div
               className="euiFlexItem"
             >
-              <span
-                title="Title"
-              >
+              <span>
                 <EuiTitle
                   aria-hidden="true"
                   className="euiDescribedFormGroup__title"
@@ -214,13 +204,11 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
   data-test-subj="test subject string"
   description="Test description"
   fullWidth={true}
-  gutterSize="l"
   title={
     <h3>
       Title
     </h3>
   }
-  titleSize="xs"
 >
   <EuiInnerText>
     <fieldset
@@ -245,9 +233,7 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
             <div
               className="euiFlexItem"
             >
-              <span
-                title="Title"
-              >
+              <span>
                 <EuiTitle
                   aria-hidden="true"
                   className="euiDescribedFormGroup__title"
@@ -327,14 +313,12 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
   className="testClass1 testClass2"
   data-test-subj="test subject string"
   description="Test description"
-  fullWidth={false}
   gutterSize="s"
   title={
     <h3>
       Title
     </h3>
   }
-  titleSize="xs"
 >
   <EuiInnerText>
     <fieldset
@@ -359,9 +343,7 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
             <div
               className="euiFlexItem"
             >
-              <span
-                title="Title"
-              >
+              <span>
                 <EuiTitle
                   aria-hidden="true"
                   className="euiDescribedFormGroup__title"
@@ -441,8 +423,6 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
   className="testClass1 testClass2"
   data-test-subj="test subject string"
   description="Test description"
-  fullWidth={false}
-  gutterSize="l"
   title={
     <h3>
       Title
@@ -473,9 +453,7 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
             <div
               className="euiFlexItem"
             >
-              <span
-                title="Title"
-              >
+              <span>
                 <EuiTitle
                   aria-hidden="true"
                   className="euiDescribedFormGroup__title"
@@ -555,14 +533,11 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
   className="testClass1 testClass2"
   data-test-subj="test subject string"
   description="Test description"
-  fullWidth={false}
-  gutterSize="l"
   title={
     <h3>
       Title
     </h3>
   }
-  titleSize="xs"
 >
   <EuiInnerText>
     <fieldset
@@ -587,9 +562,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
             <div
               className="euiFlexItem"
             >
-              <span
-                title="Title"
-              >
+              <span>
                 <EuiTitle
                   aria-hidden="true"
                   className="euiDescribedFormGroup__title"
diff --git a/src/components/form/described_form_group/described_form_group.js b/src/components/form/described_form_group/described_form_group.js
deleted file mode 100644
index 3f9d2df5836..00000000000
--- a/src/components/form/described_form_group/described_form_group.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import { EuiTitle, TITLE_SIZES } from '../../title/title';
-import { EuiText } from '../../text/text';
-import { EuiFlexGroup, EuiFlexItem } from '../../flex';
-import { GUTTER_SIZES } from '../../flex/flex_group';
-
-import { EuiScreenReaderOnly } from '../../accessibility';
-import { EuiInnerText } from '../../inner_text';
-
-const paddingSizeToClassNameMap = {
-  xxxs: 'euiDescribedFormGroup__fieldPadding--xxxsmall',
-  xxs: 'euiDescribedFormGroup__fieldPadding--xxsmall',
-  xs: 'euiDescribedFormGroup__fieldPadding--xsmall',
-  s: 'euiDescribedFormGroup__fieldPadding--small',
-  m: 'euiDescribedFormGroup__fieldPadding--medium',
-  l: 'euiDescribedFormGroup__fieldPadding--large',
-};
-
-export class EuiDescribedFormGroup extends PureComponent {
-  render() {
-    const {
-      children,
-      className,
-      gutterSize,
-      fullWidth,
-      titleSize,
-      title,
-      description,
-      ...rest
-    } = this.props;
-
-    const classes = classNames(
-      'euiDescribedFormGroup',
-      {
-        'euiDescribedFormGroup--fullWidth': fullWidth,
-      },
-      className
-    );
-
-    const fieldClasses = classNames(
-      'euiDescribedFormGroup__fields',
-      paddingSizeToClassNameMap[titleSize]
-    );
-
-    let renderedDescription;
-
-    if (description) {
-      renderedDescription = (
-        <EuiText
-          size="s"
-          color="subdued"
-          className="euiDescribedFormGroup__description">
-          {description}
-        </EuiText>
-      );
-    }
-
-    return (
-      <EuiInnerText>
-        {(ref, innerText) => (
-          <fieldset className={classes} {...rest}>
-            <EuiScreenReaderOnly>
-              <legend>{innerText}</legend>
-            </EuiScreenReaderOnly>
-
-            <EuiFlexGroup gutterSize={gutterSize}>
-              <EuiFlexItem>
-                <span ref={ref} title={innerText}>
-                  <EuiTitle
-                    size={titleSize}
-                    aria-hidden="true"
-                    className="euiDescribedFormGroup__title">
-                    {title}
-                  </EuiTitle>
-                </span>
-
-                {renderedDescription}
-              </EuiFlexItem>
-
-              <EuiFlexItem className={fieldClasses}>{children}</EuiFlexItem>
-            </EuiFlexGroup>
-          </fieldset>
-        )}
-      </EuiInnerText>
-    );
-  }
-}
-
-EuiDescribedFormGroup.propTypes = {
-  /**
-   * One or more `EuiFormRow`s
-   */
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * Passed to `EuiFlexGroup`
-   */
-  gutterSize: PropTypes.oneOf(GUTTER_SIZES),
-  fullWidth: PropTypes.bool,
-  titleSize: PropTypes.oneOf(TITLE_SIZES),
-  /**
-   * For better accessibility, it's recommended the use of HTML headings
-   */
-  title: PropTypes.node.isRequired,
-  description: PropTypes.node,
-};
-
-EuiDescribedFormGroup.defaultProps = {
-  gutterSize: 'l',
-  titleSize: 'xs',
-  fullWidth: false,
-};
diff --git a/src/components/form/described_form_group/described_form_group.test.js b/src/components/form/described_form_group/described_form_group.test.tsx
similarity index 86%
rename from src/components/form/described_form_group/described_form_group.test.js
rename to src/components/form/described_form_group/described_form_group.test.tsx
index f0e838916b1..0d3888edb17 100644
--- a/src/components/form/described_form_group/described_form_group.test.js
+++ b/src/components/form/described_form_group/described_form_group.test.tsx
@@ -65,15 +65,8 @@ describe('EuiDescribedFormGroup', () => {
     });
 
     test('gutterSize is rendered', () => {
-      const describedFormGroupProps = {
-        gutterSize: 's',
-      };
-
       const component = mount(
-        <EuiDescribedFormGroup
-          {...requiredProps}
-          {...props}
-          {...describedFormGroupProps}>
+        <EuiDescribedFormGroup gutterSize="s" {...requiredProps} {...props}>
           <EuiFormRow>
             <input />
           </EuiFormRow>
@@ -84,15 +77,8 @@ describe('EuiDescribedFormGroup', () => {
     });
 
     test('titleSize is rendered', () => {
-      const describedFormGroupProps = {
-        titleSize: 'l',
-      };
-
       const component = mount(
-        <EuiDescribedFormGroup
-          {...requiredProps}
-          {...props}
-          {...describedFormGroupProps}>
+        <EuiDescribedFormGroup titleSize="l" {...requiredProps} {...props}>
           <EuiFormRow>
             <input />
           </EuiFormRow>
diff --git a/src/components/form/described_form_group/described_form_group.tsx b/src/components/form/described_form_group/described_form_group.tsx
new file mode 100644
index 00000000000..ae5b8a558af
--- /dev/null
+++ b/src/components/form/described_form_group/described_form_group.tsx
@@ -0,0 +1,115 @@
+import React, { ReactNode, HTMLAttributes } from 'react';
+
+import classNames from 'classnames';
+
+import { CommonProps, keysOf } from '../../common';
+
+import { EuiTitle, EuiTitleSize, EuiTitleProps } from '../../title';
+import { EuiText } from '../../text';
+import { EuiFlexGroup, EuiFlexItem, EuiFlexGroupGutterSize } from '../../flex';
+
+import { EuiScreenReaderOnly } from '../../accessibility';
+import { EuiInnerText } from '../../inner_text';
+
+const paddingSizeToClassNameMap = {
+  xxxs: 'euiDescribedFormGroup__fieldPadding--xxxsmall',
+  xxs: 'euiDescribedFormGroup__fieldPadding--xxsmall',
+  xs: 'euiDescribedFormGroup__fieldPadding--xsmall',
+  s: 'euiDescribedFormGroup__fieldPadding--small',
+  m: 'euiDescribedFormGroup__fieldPadding--medium',
+  l: 'euiDescribedFormGroup__fieldPadding--large',
+};
+
+export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
+
+export type EuiDescribedFormGroupPaddingSize = keyof typeof paddingSizeToClassNameMap;
+
+export type EuiDescribedFormGroupProps = CommonProps &
+  Omit<HTMLAttributes<HTMLFieldSetElement>, 'title'> & {
+    /**
+     * One or more `EuiFormRow`s
+     */
+    children?: ReactNode;
+    /**
+     * Passed to `EuiFlexGroup`
+     */
+    gutterSize?: EuiFlexGroupGutterSize;
+    fullWidth?: boolean;
+    /**
+     * For better accessibility, it's recommended the use of HTML headings
+     */
+    title: EuiTitleProps['children'];
+    titleSize?: EuiTitleSize;
+    /**
+     * Added as a child of `EuiText`
+     */
+    description?: ReactNode;
+  };
+
+export const EuiDescribedFormGroup: React.FunctionComponent<
+  EuiDescribedFormGroupProps
+> = ({
+  children,
+  className,
+  gutterSize = 'l',
+  fullWidth = false,
+  titleSize = 'xs',
+  title,
+  description,
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiDescribedFormGroup',
+    {
+      'euiDescribedFormGroup--fullWidth': fullWidth,
+    },
+    className
+  );
+
+  const fieldClasses = classNames(
+    'euiDescribedFormGroup__fields',
+    paddingSizeToClassNameMap[titleSize]
+  );
+
+  let renderedDescription: ReactNode;
+
+  if (description) {
+    renderedDescription = (
+      <EuiText
+        size="s"
+        color="subdued"
+        className="euiDescribedFormGroup__description">
+        {description}
+      </EuiText>
+    );
+  }
+
+  return (
+    <EuiInnerText>
+      {(ref, innerText) => (
+        <fieldset className={classes} {...rest}>
+          <EuiScreenReaderOnly>
+            <legend>{innerText}</legend>
+          </EuiScreenReaderOnly>
+
+          <EuiFlexGroup gutterSize={gutterSize}>
+            <EuiFlexItem>
+              <span ref={ref}>
+                <EuiTitle
+                  size={titleSize}
+                  aria-hidden="true"
+                  className="euiDescribedFormGroup__title">
+                  {title}
+                </EuiTitle>
+              </span>
+
+              {renderedDescription}
+            </EuiFlexItem>
+
+            <EuiFlexItem className={fieldClasses}>{children}</EuiFlexItem>
+          </EuiFlexGroup>
+        </fieldset>
+      )}
+    </EuiInnerText>
+  );
+};
diff --git a/src/components/form/described_form_group/index.js b/src/components/form/described_form_group/index.js
deleted file mode 100644
index 94d1f6d6af1..00000000000
--- a/src/components/form/described_form_group/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { EuiDescribedFormGroup } from './described_form_group';
diff --git a/src/components/form/described_form_group/index.ts b/src/components/form/described_form_group/index.ts
new file mode 100644
index 00000000000..74c867749ed
--- /dev/null
+++ b/src/components/form/described_form_group/index.ts
@@ -0,0 +1,4 @@
+export {
+  EuiDescribedFormGroup,
+  EuiDescribedFormGroupProps,
+} from './described_form_group';
diff --git a/src/components/title/index.ts b/src/components/title/index.ts
index a61eccd23ee..a87cf6cb1ef 100644
--- a/src/components/title/index.ts
+++ b/src/components/title/index.ts
@@ -1 +1 @@
-export { EuiTitle } from './title';
+export { EuiTitle, EuiTitleProps, EuiTitleSize } from './title';