diff --git a/src/FormGroup.js b/src/FormGroup.js
deleted file mode 100644
index ff5f54cf5b9..00000000000
--- a/src/FormGroup.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import {COMMON, get, TYPOGRAPHY} from './constants'
-import theme from './theme'
-import sx from './sx'
-
-const FormGroup = styled.div`
-  margin: ${get('space.3')} 0;
-  font-weight: ${get('fontWeights.normal')};
-  ${COMMON};
-  ${sx};
-`
-
-FormGroup.Label = styled.label`
-  display: block;
-  margin: 0 0 ${get('space.2')};
-  font-size: ${get('fontSizes.1')};
-  font-weight: ${get('fontWeights.bold')};
-  ${TYPOGRAPHY};
-  ${COMMON};
-  ${sx};
-`
-
-FormGroup.Label.defaultProps = {
-  theme
-}
-FormGroup.Label.propTypes = {
-  ...TYPOGRAPHY.propTypes,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-}
-FormGroup.Label.displayName = 'FormGroup.Label'
-
-FormGroup.defaultProps = {theme}
-FormGroup.propTypes = {
-  children: PropTypes.node,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-}
-
-export default FormGroup
diff --git a/src/FormGroup.tsx b/src/FormGroup.tsx
new file mode 100644
index 00000000000..85050fe6719
--- /dev/null
+++ b/src/FormGroup.tsx
@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {COMMON, get, TYPOGRAPHY, SystemCommonProps, SystemTypographyProps} from './constants'
+import theme from './theme'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const FormGroup = styled.div<SystemCommonProps & SxProp>`
+  margin: ${get('space.3')} 0;
+  font-weight: ${get('fontWeights.normal')};
+  ${COMMON};
+  ${sx};
+`
+
+FormGroup.defaultProps = {theme}
+
+FormGroup.propTypes = {
+  children: PropTypes.node,
+  ...COMMON.propTypes,
+  ...sx.propTypes
+}
+
+const FormGroupLabel = styled.label<SystemTypographyProps & SystemCommonProps & SxProp>`
+  display: block;
+  margin: 0 0 ${get('space.2')};
+  font-size: ${get('fontSizes.1')};
+  font-weight: ${get('fontWeights.bold')};
+  ${TYPOGRAPHY};
+  ${COMMON};
+  ${sx};
+`
+
+FormGroupLabel.displayName = 'FormGroup.Label'
+
+FormGroupLabel.defaultProps = {
+  theme
+}
+
+FormGroupLabel.propTypes = {
+  ...TYPOGRAPHY.propTypes,
+  ...COMMON.propTypes,
+  ...sx.propTypes
+}
+
+export type FormGroupProps = ComponentProps<typeof FormGroup>
+export type FormGroupLabelProps = ComponentProps<typeof FormGroupLabel>
+export default Object.assign(FormGroup, {Label: FormGroupLabel})
diff --git a/src/__tests__/FormGroup.js b/src/__tests__/FormGroup.tsx
similarity index 91%
rename from src/__tests__/FormGroup.js
rename to src/__tests__/FormGroup.tsx
index fea467ae141..e25226f13d0 100644
--- a/src/__tests__/FormGroup.js
+++ b/src/__tests__/FormGroup.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {FormGroup, TextInput} from '..'
+import {FormGroup} from '..'
 import {COMMON, TYPOGRAPHY} from '../constants'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
@@ -18,7 +18,7 @@ describe('FormGroup', () => {
     const {container} = HTMLRender(
       <FormGroup>
         <FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
-        <TextInput id="example-text" value="Example Value" />
+        <input id="example-text" value="Example Value" />
       </FormGroup>
     )
     const results = await axe(container)
diff --git a/src/__tests__/__snapshots__/FormGroup.js.snap b/src/__tests__/__snapshots__/FormGroup.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/FormGroup.js.snap
rename to src/__tests__/__snapshots__/FormGroup.tsx.snap