diff --git a/packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx b/packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx
index caccf62e3f7..7cce1326134 100644
--- a/packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx
+++ b/packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
+import { ToggleGroupItem } from './ToggleGroupItem';
 
 export interface ToggleGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the toggle group */
@@ -9,6 +10,8 @@ export interface ToggleGroupProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Modifies the toggle group to include compact styling. */
   isCompact?: boolean;
+  /** Disable all toggle group items under this component. */
+  areAllGroupsDisabled?: boolean;
   /** Accessible label for the toggle group */
   'aria-label'?: string;
 }
@@ -17,12 +20,15 @@ export const ToggleGroup: React.FunctionComponent<ToggleGroupProps> = ({
   className,
   children,
   isCompact = false,
+  areAllGroupsDisabled = false,
   'aria-label': ariaLabel,
   ...props
 }: ToggleGroupProps) => {
-  const toggleGroupItemList = [] as any[];
-  React.Children.forEach(children, child => {
-    toggleGroupItemList.push(child);
+  const toggleGroupItemList = React.Children.map(children, child => {
+    const childCompName = (child as any).type.name;
+    return childCompName !== ToggleGroupItem.name
+      ? child
+      : React.cloneElement(child as React.ReactElement, areAllGroupsDisabled ? { isDisabled: true } : {});
   });
 
   return (
diff --git a/packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap b/packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap
index f9f1499c594..ef5283a7635 100644
--- a/packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap
+++ b/packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap
@@ -71,9 +71,11 @@ exports[`isCompact 1`] = `
   role="group"
 >
   <ToggleGroupItem
+    key=".0"
     text="Test"
   />
   <ToggleGroupItem
+    key=".1"
     text="Test"
   />
 </div>
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md
index 4aa7a41961a..2491a72ee59 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md
@@ -6,7 +6,7 @@ propComponents: ['ToggleGroup', 'ToggleGroupItem']
 ---
 import './toggleGroup.css';
 
-import { ToggleGroup, ToggleGroupItem} from '@patternfly/react-core';
+import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } 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';
@@ -16,7 +16,7 @@ import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square
 ### Default with multiple selectable
 ```js
 import React from 'react';
-import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
 
 class DefaultToggleGroupExample extends React.Component {
   constructor(props) {
@@ -24,7 +24,8 @@ class DefaultToggleGroupExample extends React.Component {
     this.state = {
       isSelected: {
         first: false,
-        second: false
+        second: false,
+        disableAll: false
       }
     };
     this.handleItemClick = (isSelected, event) => {
@@ -36,17 +37,29 @@ class DefaultToggleGroupExample extends React.Component {
         };
       });
     };
+    this.disableAllClick = () => {
+      this.setState(prevState => ({ disableAll: !prevState.disableAll }));
+    };
   }
 
   render() {
     const { isSelected } = this.state;
 
     return (
-      <ToggleGroup 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>
+      <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>
     );
   }
 }