diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md
index ba0723bb5c2..c9ae050331a 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md
@@ -14,207 +14,21 @@ import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square
 ## Examples
 
 ### Default with multiple selectable
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
-
-class DefaultToggleGroupExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: {
-        first: false,
-        second: false,
-        disableAll: false
-      }
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState(prevState => {
-        prevState.isSelected[id] = isSelected;
-        return {
-          isSelected: prevState.isSelected
-        };
-      });
-    };
-    this.disableAllClick = () => {
-      this.setState(prevState => ({ disableAll: !prevState.disableAll }));
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-
-    return (
-      <Stack hasGutter>
-        <StackItem>
-          <Button onClick={this.disableAllClick}>
-            {this.state.disableAll ? "Enable back" : "Disable all"}
-          </Button>
-        </StackItem>
-        <StackItem>
-          <ToggleGroup areAllGroupsDisabled={this.state.disableAll} aria-label="Default with multiple selectable">
-            <ToggleGroupItem text="Option 1" key={0} buttonId="first" isSelected={isSelected.first} onChange={this.handleItemClick} />
-            <ToggleGroupItem text="Option 2" key={1} buttonId="second" isSelected={isSelected.second} onChange={this.handleItemClick} />
-            <ToggleGroupItem text="Option 3" key={2} isDisabled/>
-          </ToggleGroup>
-        </StackItem>
-      </Stack>
-    );
-  }
-}
+```ts file="./ToggleGroupDefaultMultiple.tsx"
 ```
 
 ### Default with single selectable
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-
-class DefaultAsRadioToggleGroupExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: ""
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState({ isSelected: id });
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-
-    return (
-      <ToggleGroup aria-label="Default with single selectable">
-        <ToggleGroupItem text="Option 1" buttonId="firstRadio" isSelected={isSelected === "firstRadio"} onChange={this.handleItemClick} />
-        <ToggleGroupItem text="Option 2" buttonId="secondRadio" isSelected={isSelected === "secondRadio"} onChange={this.handleItemClick} />
-        <ToggleGroupItem text="Option 3" buttonId="thirdRadio" isSelected={isSelected === "thirdRadio"} onChange={this.handleItemClick} />
-      </ToggleGroup>
-    );
-  }
-}
+```ts file="./ToggleGroupDefaultSingle.tsx"
 ```
 
 ### Icons
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
-
-class IconToggleGroupExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: {
-        "icons-1": false,
-        "icons-2": false,
-        "icons-3": true
-      }
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState(prevState => {
-        prevState.isSelected[id] = isSelected;
-        return {
-          isSelected: prevState.isSelected
-        };
-      });
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-    return (
-      <ToggleGroup aria-label="Icon variant toggle group">
-        <ToggleGroupItem icon={<CopyIcon />} aria-label="copy icon button" buttonId="icons-1" isSelected={isSelected["icons-1"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem icon={<UndoIcon />} aria-label="undo icon button" buttonId="icons-2" isSelected={isSelected["icons-2"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem icon={<ShareSquareIcon />} aria-label="share square icon button" buttonId="icons-3" isSelected={isSelected["icons-3"]} onChange={this.handleItemClick} />
-      </ToggleGroup>
-    );
-  }
-}
+```ts file="./ToggleGroupIcon.tsx"
 ```
 
 ### Text and icons
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
-
-class TextIconToggleGroupExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: {
-        "text-icons-1": false,
-        "text-icons-2": false,
-        "text-icons-3": true
-      }
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState(prevState => {
-        prevState.isSelected[id] = isSelected;
-        return {
-          isSelected: prevState.isSelected
-        };
-      });
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-    return (
-      <ToggleGroup aria-label="Icon variant toggle group">
-        <ToggleGroupItem icon={<CopyIcon />} text="Copy" aria-label="copy icon button" buttonId="text-icons-1" isSelected={isSelected["text-icons-1"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem icon={<UndoIcon />} text="Undo" aria-label="undo icon button" buttonId="text-icons-2" isSelected={isSelected["text-icons-2"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem icon={<ShareSquareIcon />} text="Share" aria-label="share square icon button" buttonId="text-icons-3" isSelected={isSelected["text-icons-3"]} onChange={this.handleItemClick} />
-      </ToggleGroup>
-    );
-  }
-}
+```ts file="./ToggleGroupTextIcon.tsx"
 ```
 
 ### Compact variant
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem, ToggleGroupVariant } from '@patternfly/react-core';
-
-class CompactToggleGroupExample extends React.Component {
-constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: {
-        "compact-1": false,
-        "compact-2": false
-      }
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState(prevState => {
-        prevState.isSelected[id] = isSelected;
-        return {
-          isSelected: prevState.isSelected
-        };
-      });
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-
-    return (
-      <ToggleGroup isCompact aria-label="Compact variant toggle group">
-        <ToggleGroupItem text="Option 1" buttonId="compact-1" isSelected={isSelected["compact-1"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem text="Option 2" buttonId="compact-2" isSelected={isSelected["compact-2"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem text="Option 3" isDisabled />
-      </ToggleGroup>
-    );
-  }
-}
+```ts file="./ToggleGroupCompact.tsx"
 ```
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx
new file mode 100644
index 00000000000..ea64b90b02b
--- /dev/null
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+export const ToggleGroupCompact: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState({
+    'toggle-group-compact-1': false,
+    'toggle-group-compact-2': false
+  });
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+  return (
+    <ToggleGroup isCompact aria-label="Compact variant toggle group">
+      <ToggleGroupItem
+        text="Option 1"
+        buttonId="toggle-group-compact-1"
+        isSelected={isSelected['toggle-group-compact-1']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        text="Option 2"
+        buttonId="toggle-group-compact-2"
+        isSelected={isSelected['toggle-group-compact-2']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem text="Option 3" isDisabled />
+    </ToggleGroup>
+  );
+};
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx
new file mode 100644
index 00000000000..aa05d672585
--- /dev/null
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
+
+export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState({
+    'toggle-group-multiple-1': false,
+    'toggle-group-multiple-2': false
+  });
+  const [disableAll, setDisableAll] = React.useState(false);
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+  const disableAllClick = () => {
+    setDisableAll(!disableAll);
+  };
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Button onClick={disableAllClick}>{disableAll ? 'Enable back' : 'Disable all'}</Button>
+      </StackItem>
+      <StackItem>
+        <ToggleGroup areAllGroupsDisabled={disableAll} aria-label="Default with multiple selectable">
+          <ToggleGroupItem
+            text="Option 1"
+            key={0}
+            buttonId="toggle-group-multiple-1"
+            isSelected={isSelected['toggle-group-multiple-1']}
+            onChange={handleItemClick}
+          />
+          <ToggleGroupItem
+            text="Option 2"
+            key={1}
+            buttonId="toggle-group-multiple-2"
+            isSelected={isSelected['toggle-group-multiple-2']}
+            onChange={handleItemClick}
+          />
+          <ToggleGroupItem text="Option 3" key={2} isDisabled />
+        </ToggleGroup>
+      </StackItem>
+    </Stack>
+  );
+};
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx
new file mode 100644
index 00000000000..608c8d93503
--- /dev/null
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+export const ToggleGroupDefaultSingle: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState('');
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(id);
+  };
+  return (
+    <ToggleGroup aria-label="Default with single selectable">
+      <ToggleGroupItem
+        text="Option 1"
+        buttonId="toggle-group-single-1"
+        isSelected={isSelected === 'toggle-group-single-1'}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        text="Option 2"
+        buttonId="toggle-group-single-2"
+        isSelected={isSelected === 'toggle-group-single-2'}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        text="Option 3"
+        buttonId="toggle-group-single-3"
+        isSelected={isSelected === 'toggle-group-single-3'}
+        onChange={handleItemClick}
+      />
+    </ToggleGroup>
+  );
+};
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx
new file mode 100644
index 00000000000..7bb0eef13f1
--- /dev/null
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
+
+export const ToggleGroupIcon: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState({
+    'toggle-group-icons-1': false,
+    'toggle-group-icons-2': false,
+    'toggle-group-icons-3': true
+  });
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+  return (
+    <ToggleGroup aria-label="Icon variant toggle group">
+      <ToggleGroupItem
+        icon={<CopyIcon />}
+        aria-label="copy"
+        buttonId="toggle-group-icons-1"
+        isSelected={isSelected['toggle-group-icons-1']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        icon={<UndoIcon />}
+        aria-label="undo"
+        buttonId="toggle-group-icons-2"
+        isSelected={isSelected['toggle-group-icons-2']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        icon={<ShareSquareIcon />}
+        aria-label="share square"
+        buttonId="toggle-group-icons-3"
+        isSelected={isSelected['toggle-group-icons-3']}
+        onChange={handleItemClick}
+      />
+    </ToggleGroup>
+  );
+};
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
new file mode 100644
index 00000000000..2755727da5f
--- /dev/null
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
+
+export const ToggleGroupIcon: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState({
+    'text-icons-1': false,
+    'text-icons-2': false,
+    'text-icons-3': true
+  });
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+  return (
+    <ToggleGroup aria-label="Text and icon toggle group">
+      <ToggleGroupItem
+        icon={<CopyIcon />}
+        text="Copy"
+        buttonId="toggle-group-text-icons-1"
+        isSelected={isSelected['toggle-group-text-icons-1']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        icon={<UndoIcon />}
+        text="Undo"
+        buttonId="toggle-group-text-icons-2"
+        isSelected={isSelected['toggle-group-text-icons-2']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        icon={<ShareSquareIcon />}
+        text="Share"
+        buttonId="toggle-group-text-icons-3"
+        isSelected={isSelected['toggle-group-text-icons-3']}
+        onChange={handleItemClick}
+      />
+    </ToggleGroup>
+  );
+};