diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md
index 4a0986c49..2ce7e5ab3 100644
--- a/docs/components/radio-group.md
+++ b/docs/components/radio-group.md
@@ -5,11 +5,14 @@
 Radio Groups are used to group multiple radios so they function as a single control.
 
 ```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio value="1" checked>Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
-</sl-radio-group>
+<form id="a">
+  <sl-radio-group label="Select an option">
+    <sl-radio name="option" value="1" checked>Option 1</sl-radio>
+    <sl-radio name="option" value="2">Option 2</sl-radio>
+    <sl-radio name="option" value="3">Option 3</sl-radio>
+  </sl-radio-group>
+  <sl-button type="submit">Submit</sl-button>
+</form>
 ```
 
 ```jsx react
@@ -17,11 +20,15 @@ import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <SlRadioGroup label="Select an option">
-    <SlRadio value="1" checked>
+    <SlRadio name="option" value="1" checked>
       Option 1
     </SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
+    <SlRadio name="option" value="2">
+      Option 2
+    </SlRadio>
+    <SlRadio name="option" value="3">
+      Option 3
+    </SlRadio>
   </SlRadioGroup>
 );
 ```
@@ -34,9 +41,9 @@ You can show a fieldset and legend that wraps the radio group using the `fieldse
 
 ```html preview
 <sl-radio-group label="Select an option" fieldset>
-  <sl-radio value="1" checked>Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
+  <sl-radio name="option" value="1" checked>Option 1</sl-radio>
+  <sl-radio name="option" value="2">Option 2</sl-radio>
+  <sl-radio name="option" value="3">Option 3</sl-radio>
 </sl-radio-group>
 ```
 
@@ -45,11 +52,15 @@ import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <SlRadioGroup label="Select an option" fieldset>
-    <SlRadio value="1" checked>
+    <SlRadio name="option" value="1" checked>
       Option 1
     </SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
+    <SlRadio name="option" value="2">
+      Option 2
+    </SlRadio>
+    <SlRadio name="option" value="3">
+      Option 3
+    </SlRadio>
   </SlRadioGroup>
 );
 ```
diff --git a/docs/components/radio.md b/docs/components/radio.md
index 328a5f91c..025b467b7 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -8,9 +8,9 @@ Radios are designed to be used with [radio groups](/components/radio-group). As
 
 ```html preview
 <sl-radio-group label="Select an option">
-  <sl-radio value="1" checked>Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
+  <sl-radio name="option" value="1" checked>Option 1</sl-radio>
+  <sl-radio name="option" value="2">Option 2</sl-radio>
+  <sl-radio name="option" value="3">Option 3</sl-radio>
 </sl-radio-group>
 ```
 
@@ -19,11 +19,15 @@ import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <SlRadioGroup label="Select an option">
-    <SlRadio value="1" checked>
+    <SlRadio name="option" value="1" checked>
       Option 1
     </SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
+    <SlRadio name="option" value="2">
+      Option 2
+    </SlRadio>
+    <SlRadio name="option" value="3">
+      Option 3
+    </SlRadio>
   </SlRadioGroup>
 );
 ```
@@ -38,10 +42,10 @@ Use the `disabled` attribute to disable a radio.
 
 ```html preview
 <sl-radio-group label="Select an option">
-  <sl-radio value="1" checked>Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
-  <sl-radio value="4" disabled>Disabled</sl-radio>
+  <sl-radio name="option" value="1" checked>Option 1</sl-radio>
+  <sl-radio name="option" value="2">Option 2</sl-radio>
+  <sl-radio name="option" value="3">Option 3</sl-radio>
+  <sl-radio name="option" value="4" disabled>Disabled</sl-radio>
 </sl-radio-group>
 ```
 
@@ -50,12 +54,16 @@ import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <SlRadioGroup label="Select an option">
-    <SlRadio value="1" checked>
+    <SlRadio name="option" value="1" checked>
       Option 1
     </SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
-    <SlRadio value="4" disabled>
+    <SlRadio name="option" value="2">
+      Option 2
+    </SlRadio>
+    <SlRadio name="option" value="3">
+      Option 3
+    </SlRadio>
+    <SlRadio name="option" value="4" disabled>
       Disabled
     </SlRadio>
   </SlRadioGroup>