diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx
index 98ad0681..3fabb586 100644
--- a/docs/src/pages/components/RadioButton.svx
+++ b/docs/src/pages/components/RadioButton.svx
@@ -9,33 +9,9 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
 
 ## Default
 
-<RadioButtonGroup selected="standard">
-  <RadioButton labelText="Free (1 GB)" value="free" />
-  <RadioButton labelText="Standard (10 GB)" value="standard" />
-  <RadioButton labelText="Pro (128 GB)" value="pro" />
-</RadioButtonGroup>
+The `name` prop set on `RadioButtonGroup` is passed to the individual `RadioButton` inputs.
 
-## With legend text
-
-<RadioButtonGroup legendText="Storage tier (disk)" selected="standard">
-  <RadioButton labelText="Free (1 GB)" value="free" />
-  <RadioButton labelText="Standard (10 GB)" value="standard" />
-  <RadioButton labelText="Pro (128 GB)" value="pro" />
-</RadioButtonGroup>
-
-## Legend text slot
-
-Use the named "legendText" slot to customize the legend text.
-
-<RadioButtonGroup selected="standard">
-  <div slot="legendText" style="display: flex">
-    Storage tier (disk)
-    <Tooltip>
-      <p>
-        Storage tiers may vary based on geolocation.
-      </p>
-    </Tooltip>
-  </div>
+<RadioButtonGroup legendText="Storage tier (disk)" name="plan" selected="standard">
   <RadioButton labelText="Free (1 GB)" value="free" />
   <RadioButton labelText="Standard (10 GB)" value="standard" />
   <RadioButton labelText="Pro (128 GB)" value="pro" />
@@ -53,6 +29,24 @@ Use `hideLegend` to visually hide the legend text.
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
+## Legend text slot
+
+Use the named "legendText" slot to customize the legend text.
+
+<RadioButtonGroup name="plan" selected="standard">
+  <div slot="legendText" style:display="flex">
+    Storage tier (disk)
+    <Tooltip>
+      <p>
+        Storage tiers may vary based on geolocation.
+      </p>
+    </Tooltip>
+  </div>
+  <RadioButton labelText="Free (1 GB)" value="free" />
+  <RadioButton labelText="Standard (10 GB)" value="standard" />
+  <RadioButton labelText="Pro (128 GB)" value="pro" />
+</RadioButtonGroup>
+
 ## Reactive example
 
 Use the `selected` prop to bind and update the selected value.
@@ -61,7 +55,7 @@ Use the `selected` prop to bind and update the selected value.
 
 ## Left-aligned label text
 
-<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
+<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan" selected="standard">
   <RadioButton labelText="Free (1 GB)" value="free" />
   <RadioButton labelText="Standard (10 GB)" value="standard" />
   <RadioButton labelText="Pro (128 GB)" value="pro" />
@@ -69,7 +63,7 @@ Use the `selected` prop to bind and update the selected value.
 
 ## Disabled buttons
 
-<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
+<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan" selected="standard">
   <RadioButton disabled labelText="Free (1 GB)" value="free" />
   <RadioButton labelText="Standard (10 GB)" value="standard" />
   <RadioButton disabled labelText="Pro (128 GB)" value="pro" />
@@ -77,7 +71,7 @@ Use the `selected` prop to bind and update the selected value.
 
 ## Vertical orientation
 
-<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" selected="standard">
+<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="plan" selected="standard">
   <RadioButton labelText="Free (1 GB)" value="free" />
   <RadioButton labelText="Standard (10 GB)" value="standard" />
   <RadioButton labelText="Pro (128 GB)" value="pro" />
diff --git a/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte b/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
index 9168d21f..0de33503 100644
--- a/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
+++ b/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
@@ -10,15 +10,20 @@
   let plan = plans[1];
 </script>
 
-<RadioButtonGroup legendText="Storage tier (disk)" bind:selected="{plan}">
-  {#each plans as value}
+<RadioButtonGroup
+  legendText="Storage tier (disk)"
+  name="plan"
+  bind:selected="{plan}"
+>
+  {#each plans as value (value)}
     <RadioButton labelText="{value}" value="{value}" />
   {/each}
 </RadioButtonGroup>
 
-<div style="margin: var(--cds-layout-01) 0">
-  {#each plans as value}
+<div style="margin: var(--cds-layout-03) 0">
+  {#each plans as value (value)}
     <Button
+      size="small"
       kind="secondary"
       disabled="{plan === value}"
       on:click="{() => (plan = value)}"