diff --git a/src/components/CheckboxField/README.md b/src/components/CheckboxField/README.md
index 5900faa4..12a7c94c 100644
--- a/src/components/CheckboxField/README.md
+++ b/src/components/CheckboxField/README.md
@@ -126,7 +126,7 @@ have.
 React.createElement(() => {
   const [agree, setAgree] = React.useState(true);
   return (
-    <React.Fragment>
+    <>
       <CheckboxField
         checked={agree}
         label="I have read and agree with terms and conditions"
@@ -148,7 +148,7 @@ React.createElement(() => {
         validationState="invalid"
         validationText="You must agree to be able to proceed."
       />
-    </React.Fragment>
+    </>
   );
 });
 ```
diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md
index c6e15fca..5c45e570 100644
--- a/src/components/FormLayout/README.md
+++ b/src/components/FormLayout/README.md
@@ -337,20 +337,20 @@ React.createElement(() => {
         </ToolbarItem>
       </Toolbar>
       <FormLayout fieldLayout={fieldLayout} labelWidth="auto">
-        <React.Fragment>
+        <>
           <TextField
             label="First Name"
           />
           <TextField
             label="Last Name"
           />
-        </React.Fragment>
+        </>
         <TextField
           helpText="Optional"
           label="Email address"
           type="email"
         />
-        <React.Fragment>
+        <>
           <TextField
             label="Address"
             placeholder="Address line 1"
@@ -375,7 +375,7 @@ React.createElement(() => {
             label="This is my delivery address"
             onChange={() => setIsDeliveryAddress(!isDeliveryAddress)}
           />
-        </React.Fragment>
+        </>
         <SelectField
           label="Your favourite fruit"
           onChange={(e) => setFruit(e.target.value)}
diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
index 370b8c55..283875a0 100644
--- a/src/components/Modal/README.md
+++ b/src/components/Modal/README.md
@@ -26,7 +26,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch modal"
         onClick={() => setModalOpen(true)}
@@ -66,7 +66,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -116,7 +116,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch blocking modal without title"
         onClick={() => {
@@ -235,7 +235,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -265,7 +265,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch with close button"
         onClick={() => {
@@ -356,7 +356,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -510,7 +510,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch small modal"
         onClick={() => {
@@ -575,7 +575,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -588,7 +588,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch auto-width modal"
         onClick={() => setModalOpen(true)}
@@ -629,7 +629,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -650,7 +650,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch auto-with modal with a form"
         onClick={() => setModalOpen(true)}
@@ -692,7 +692,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -708,7 +708,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch modal at center"
         onClick={() => {
@@ -759,7 +759,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -884,7 +884,7 @@ React.createElement(() => {
     </ModalContent>
   )
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch modal with scrolling body"
         onClick={() => {
@@ -945,7 +945,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
diff --git a/src/components/Popover/README.md b/src/components/Popover/README.md
index c88f77d3..712e7b11 100644
--- a/src/components/Popover/README.md
+++ b/src/components/Popover/README.md
@@ -56,7 +56,7 @@ React.createElement(() => {
   const [align, setAlign] = React.useState('');
   // All inline styles in this example are for demonstration purposes only.
   return (
-    <React.Fragment>
+    <>
       <Toolbar align="baseline">
         <ToolbarItem>
           <span id="alignment-options-label">Alignment:</span>
@@ -112,7 +112,7 @@ React.createElement(() => {
           </Popover>
         </PopoverWrapper>
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -222,7 +222,7 @@ React.createElement(() => {
   // All inline styles in this example EXCEPT Popover `style` are for
   // demonstration purposes only.
   return (
-    <React.Fragment>
+    <>
       <Toolbar>
         <ToolbarItem>
           <SelectField
@@ -279,7 +279,7 @@ React.createElement(() => {
           )}
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
diff --git a/src/components/Radio/README.md b/src/components/Radio/README.md
index d1068811..a4dbd8d0 100644
--- a/src/components/Radio/README.md
+++ b/src/components/Radio/README.md
@@ -201,7 +201,7 @@ have.
       },
     ];
     return (
-      <React.Fragment>
+      <>
         <Radio
           label="Your favourite fruit"
           onChange={(e) => setFruit(e.target.value)}
@@ -229,7 +229,7 @@ have.
           validationText="You must select one kind of fruit."
           value={fruit}
         />
-      </React.Fragment>
+      </>
     );
   })
 ```
@@ -257,7 +257,7 @@ It's possible to disable just some options or the whole set.
       },
     ];
     return (
-      <React.Fragment>
+      <>
         <Radio
           label="Your favourite fruit"
           onChange={(e) => setFruit(e.target.value)}
@@ -271,7 +271,7 @@ It's possible to disable just some options or the whole set.
           options={options}
           value="apple"
         />
-      </React.Fragment>
+      </>
     );
   })
 ```
diff --git a/src/components/ScrollView/README.md b/src/components/ScrollView/README.md
index cf0c03c4..56a6ca16 100644
--- a/src/components/ScrollView/README.md
+++ b/src/components/ScrollView/README.md
@@ -400,7 +400,7 @@ React.createElement(() => {
     )`
   const [direction, setDirection] = React.useState('vertical');
   return(
-    <React.Fragment>
+    <>
       <Radio
         label="Direction:"
         onChange={(e) => setDirection(e.target.value)}
@@ -472,7 +472,7 @@ React.createElement(() => {
           </div>
         </ScrollView>
       </docoff-placeholder>
-    </React.Fragment>
+    </>
   );
 });
 ```
diff --git a/src/components/SelectField/README.md b/src/components/SelectField/README.md
index f546e255..6d1730c7 100644
--- a/src/components/SelectField/README.md
+++ b/src/components/SelectField/README.md
@@ -96,7 +96,7 @@ React.createElement(() => {
     },
   ];
   return (
-    <React.Fragment>
+    <>
       <SelectField
         label="Your favourite fruit"
         onChange={(e) => setFruit(e.target.value)}
@@ -110,7 +110,7 @@ React.createElement(() => {
         variant="filled"
         value={fruit}
       />
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -138,7 +138,7 @@ React.createElement(() => {
     },
   ];
   return (
-    <React.Fragment>
+    <>
       <SelectField
         label="Your favourite fruit"
         onChange={(e) => setFruit(e.target.value)}
@@ -182,7 +182,7 @@ React.createElement(() => {
         value={fruit}
         variant="filled"
       />
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -207,7 +207,7 @@ React.createElement(() => {
     },
   ];
   return (
-    <React.Fragment>
+    <>
       <SelectField
         fullWidth
         label="Your favourite fruit"
@@ -223,7 +223,7 @@ React.createElement(() => {
         value={fruit}
         variant="filled"
       />
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -273,7 +273,7 @@ React.createElement(() => {
     },
   ];
   return (
-    <React.Fragment>
+    <>
       <SelectField
         label="Your favourite crop"
         onChange={(e) => setCrop(e.target.value)}
@@ -287,7 +287,7 @@ React.createElement(() => {
         value={crop}
         variant="filled"
       />
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -317,7 +317,7 @@ React.createElement(() => {
     },
   ];
   return (
-    <React.Fragment>
+    <>
       <SelectField
         isLabelVisible={false}
         label="Your favourite fruit"
@@ -333,7 +333,7 @@ React.createElement(() => {
         value={fruit}
         variant="filled"
       />
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -362,7 +362,7 @@ React.createElement(() => {
     },
   ];
   return (
-    <React.Fragment>
+    <>
       <SelectField
         label="Your favourite fruit"
         layout="horizontal"
@@ -414,7 +414,7 @@ React.createElement(() => {
         value={fruit}
         variant="filled"
       />
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -442,7 +442,7 @@ React.createElement(() => {
     },
   ];
   return (
-    <React.Fragment>
+    <>
       <SelectField
         helpText="Choose one or more kinds of fruit to feel happy."
         label="Your favourite fruit"
@@ -494,7 +494,7 @@ React.createElement(() => {
         value={fruit}
         variant="filled"
       />
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -526,7 +526,7 @@ React.createElement(() => {
     },
   ];
   return (
-    <React.Fragment>
+    <>
       <SelectField
         label="Your favourite fruit"
         onChange={(e) => setFruit(e.target.value)}
@@ -584,7 +584,7 @@ React.createElement(() => {
         validationText="You must select at least one kind of fruit."
         variant="filled"
       />
-    </React.Fragment>
+    </>
   );
 })
 ```
@@ -612,7 +612,7 @@ React.createElement(() => {
     },
   ];
   return (
-    <React.Fragment>
+    <>
       <SelectField
         label="Your favourite fruit"
         onChange={(e) => setFruit(e.target.value)}
@@ -641,7 +641,7 @@ React.createElement(() => {
         value="apple"
         variant="filled"
       />
-    </React.Fragment>
+    </>
   );
 })
 ```
diff --git a/src/components/Toggle/README.md b/src/components/Toggle/README.md
index 094d4ff5..193c7f3a 100644
--- a/src/components/Toggle/README.md
+++ b/src/components/Toggle/README.md
@@ -123,7 +123,7 @@ have.
 React.createElement(() => {
   const [studioQuality, setStudioQuality] = React.useState(true);
   return (
-    <React.Fragment>
+    <>
       <Toggle
         checked={studioQuality}
         label="Listen in studio quality"
@@ -147,7 +147,7 @@ React.createElement(() => {
         validationState="invalid"
         validationText="Please upgrade your plan to make this option available."
       />
-    </React.Fragment>
+    </>
   );
 });
 ```