diff --git a/packages/components/src/components/composite-checkbox/composite-checkbox.jsx b/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
similarity index 62%
rename from packages/components/src/components/composite-checkbox/composite-checkbox.jsx
rename to packages/components/src/components/composite-checkbox/composite-checkbox.tsx
index e097f7ce1419..b0a2404b5bdc 100644
--- a/packages/components/src/components/composite-checkbox/composite-checkbox.jsx
+++ b/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
@@ -1,18 +1,37 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import Checkbox from '../checkbox/checkbox';
 import Text from '../text';
 
-const CompositeCheckbox = ({ name, value, onChange, className, label, id, description, children, ...props }) => {
-    const onClickContainer = e => {
+type TCompositeCheckbox = {
+    name: string;
+    value: boolean;
+    onChange: (e: React.SyntheticEvent) => void;
+    className?: string;
+    label: string;
+    id?: string;
+    description: string;
+};
+
+const CompositeCheckbox = ({
+    name,
+    value,
+    onChange,
+    className,
+    label,
+    id,
+    description,
+    children,
+    ...props
+}: React.PropsWithChildren<TCompositeCheckbox>) => {
+    const onClickContainer = (e: React.MouseEvent<HTMLDivElement>) => {
         e.stopPropagation();
         e.preventDefault();
         onChange({
             target: {
                 value: !value,
             },
-        });
+        } as any);
     };
 
     return (
@@ -36,15 +55,4 @@ const CompositeCheckbox = ({ name, value, onChange, className, label, id, descri
     );
 };
 
-CompositeCheckbox.propTypes = {
-    name: PropTypes.string.isRequired,
-    value: PropTypes.bool.isRequired,
-    onChange: PropTypes.func.isRequired,
-    className: PropTypes.string,
-    label: PropTypes.string.isRequired,
-    id: PropTypes.string,
-    description: PropTypes.string.isRequired,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-};
-
 export default CompositeCheckbox;
diff --git a/packages/components/src/components/composite-checkbox/index.js b/packages/components/src/components/composite-checkbox/index.js
index 386a4710b35b..50c2b37ef680 100644
--- a/packages/components/src/components/composite-checkbox/index.js
+++ b/packages/components/src/components/composite-checkbox/index.js
@@ -1,4 +1,4 @@
-import CompositeCheckbox from './composite-checkbox.jsx';
+import CompositeCheckbox from './composite-checkbox';
 import './composite-checkbox.scss';
 
 export default CompositeCheckbox;
diff --git a/packages/components/stories/composite-checkbox/composite-checkbox.stories.js b/packages/components/stories/composite-checkbox/composite-checkbox.stories.js
index 7e19db0da9d8..7d25da5c448a 100644
--- a/packages/components/stories/composite-checkbox/composite-checkbox.stories.js
+++ b/packages/components/stories/composite-checkbox/composite-checkbox.stories.js
@@ -4,7 +4,7 @@ import { boolean, withKnobs } from '@storybook/addon-knobs';
 import { withInfo } from '@storybook/addon-info';
 import React from 'react';
 import Theme from '../shared/theme';
-import CompositeCheckbox from 'Components/composite-checkbox/composite-checkbox.jsx';
+import CompositeCheckbox from 'Components/composite-checkbox/composite-checkbox';
 import notes from './README.md';
 import 'Components/composite-checkbox/composite-checkbox.scss';
 import 'Components/checkbox/checkbox.scss';