docs(radio-button): use name in examples (#1817)

Author: metonym

docs/src/pages/components/RadioButton.svx

@@ -9,15 +9,21 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
 
 ## Default
 
-<RadioButtonGroup selected="standard">
+The `name` prop set on `RadioButtonGroup` is passed to the individual `RadioButton` inputs.
+
+<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" />
 </RadioButtonGroup>
 
-## With legend text
+## Hidden legend
+
+It's recommended that you provide a legend for accessibility.
+
+Use `hideLegend` to visually hide the legend text.
 
-<RadioButtonGroup legendText="Storage tier (disk)" selected="standard">
+<RadioButtonGroup hideLegend 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" />
@@ -27,8 +33,8 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
 
 Use the named "legendText" slot to customize the legend text.
 
-<RadioButtonGroup selected="standard">
-  <div slot="legendText" style="display: flex">
+<RadioButtonGroup name="plan" selected="standard">
+  <div slot="legendText" style:display="flex">
     Storage tier (disk)
     <Tooltip>
       <p>
@@ -41,18 +47,6 @@ Use the named "legendText" slot to customize the legend text.
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
-## Hidden legend
-
-It's recommended that you provide a legend for accessibility.
-
-Use `hideLegend` to visually hide the legend text.
-
-<RadioButtonGroup hideLegend 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>
-
 ## Reactive example
 
 Use the `selected` prop to bind and update the selected value.
@@ -61,23 +55,23 @@ 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" />
 </RadioButtonGroup>
 
 ## 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" />
 </RadioButtonGroup>
 
 ## 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" />

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)}"