carbon-design-system · brunnerh · Jan 3, 2024 · Jan 3, 2024
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -2967,7 +2967,7 @@ None.
 | selected      | No       | <code>let</code> | Yes      | <code>string &#124; number</code>           | <code>undefined</code>    | Set the selected radio button value                      |
 | disabled      | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to disable the radio buttons               |
 | required      | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>undefined</code>    | Set to `true` to require the selection of a radio button |
-| name          | No       | <code>let</code> | No       | <code>string</code>                         | <code>undefined</code>    | Specify a name attribute for the radio button inputs     |
+| name          | Yes      | <code>let</code> | No       | <code>string</code>                         | <code>undefined</code>    | Specify a name attribute for the radio button inputs     |
 | legendText    | No       | <code>let</code> | No       | <code>string</code>                         | <code>""</code>           | Specify the legend text                                  |
 | hideLegend    | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to visually hide the legend                |
 | labelPosition | No       | <code>let</code> | No       | <code>"right" &#124; "left"</code>          | <code>"right"</code>      | Specify the label position                               |

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -9540,7 +9540,7 @@
           "type": "string",
           "isFunction": false,
           "isFunctionDeclaration": false,
-          "isRequired": false,
+          "isRequired": true,
           "constant": false,
           "reactive": false
         },

diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
@@ -85,7 +85,10 @@
   bind:theme="{$theme}"
   on:update="{(e) => {
     const theme = e.detail.theme;
-    document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark");
+    document.documentElement.style.setProperty(
+      'color-scheme',
+      ['white', 'g10'].includes(theme) ? 'light' : 'dark'
+    );
   }}"
 >
   <Header

diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx
@@ -79,16 +79,16 @@ Use the `selected` prop to bind and update the selected value.
 
 ## Skeleton
 
-<RadioButtonGroup legendText="Storage tier (disk)">
+<RadioButtonGroup legendText="Storage tier (disk)" name="skeleton">
   <RadioButtonSkeleton />
   <RadioButtonSkeleton />
   <RadioButtonSkeleton />
 </RadioButtonGroup>
 
 ## Skeleton (vertical)
 
-<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
+<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="skeleton-vertical">
   <RadioButtonSkeleton />
   <RadioButtonSkeleton />
   <RadioButtonSkeleton />
-</RadioButtonGroup>
+</RadioButtonGroup>
diff --git a/docs/src/pages/framed/Theme/Theme.svelte b/docs/src/pages/framed/Theme/Theme.svelte
@@ -10,7 +10,11 @@
 
 <Theme bind:theme />
 
-<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
+<RadioButtonGroup
+  legendText="Carbon theme"
+  name="theme"
+  bind:selected="{theme}"
+>
   {#each ["white", "g10", "g80", "g90", "g100"] as value}
     <RadioButton labelText="{value}" value="{value}" />
   {/each}

diff --git a/docs/src/pages/framed/Theme/ThemePersist.svelte b/docs/src/pages/framed/Theme/ThemePersist.svelte
@@ -10,7 +10,11 @@
 
 <Theme bind:theme persist persistKey="__carbon-theme" />
 
-<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
+<RadioButtonGroup
+  legendText="Carbon theme"
+  name="theme"
+  bind:selected="{theme}"
+>
   {#each ["white", "g10", "g80", "g90", "g100"] as value}
     <RadioButton labelText="{value}" value="{value}" />
   {/each}

diff --git a/docs/src/pages/framed/_reset.svelte b/docs/src/pages/framed/_reset.svelte
@@ -15,9 +15,12 @@
     // NOTE: we *do not* want to persist the theme as this can
     // conflict with how the iframe is displayed in the docs.
     // Instead, we want the theme to be overridden in the standalone page.
-    if ([ "white", "g10", "g80", "g90", "g100" ].includes(current_theme)) {
-      document.documentElement.setAttribute("theme", current_theme)
-      document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(current_theme) ? "light" : "dark");
+    if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
+      document.documentElement.setAttribute("theme", current_theme);
+      document.documentElement.style.setProperty(
+        "color-scheme",
+        ["white", "g10"].includes(current_theme) ? "light" : "dark"
+      );
     }
   }
 </script>

diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
@@ -128,6 +128,7 @@
         <RadioButtonGroup
           style="margin-top: var(--cds-spacing-08)"
           legendText="Carbon themes"
+          name="theme"
           bind:selected="{$theme}"
         >
           {#each ["white", "g10", "g80", "g90", "g100"] as value}

diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte
@@ -54,6 +54,22 @@
   }
 
   $: checked = $selectedValue === value;
+
+  function onChange() {
+    if (update) {
+      update(value);
+    } else {
+      checked = ref.checked;
+
+      if (name != null && name != "") {
+        Array.from(document.getElementsByName(name))
+          .filter((element) => element !== ref)
+          .forEach((element) =>
+            element.dispatchEvent(new CustomEvent("carbon:checked-change"))
+          );
+      }
+    }
+  }
 </script>
 
 <div
@@ -72,10 +88,9 @@
     value="{value}"
     class:bx--radio-button="{true}"
     on:change
-    on:change="{() => {
-      if (update) {
-        update(value);
-      }
+    on:change="{onChange}"
+    on:carbon:checked-change="{(e) => {
+      checked = e.currentTarget.checked;
     }}"
   />
   <label class:bx--radio-button__label="{true}" for="{id}">

diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -22,7 +22,7 @@
    * Specify a name attribute for the radio button inputs
    * @type {string}
    */
-  export let name = undefined;
+  export let name;
 
   /** Specify the legend text */
   export let legendText = "";

diff --git a/tests/Form.test.svelte b/tests/Form.test.svelte
@@ -20,7 +20,7 @@
     <Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
   </FormGroup>
   <FormGroup legendText="Radio buttons">
-    <RadioButtonGroup selected="default-selected">
+    <RadioButtonGroup selected="default-selected" name="radio-group">
       <RadioButton
         id="radio-1"
         value="standard"

diff --git a/tests/RadioButton.test.svelte b/tests/RadioButton.test.svelte
@@ -4,6 +4,7 @@
 
 <RadioButtonGroup
   legendText="Storage tier (disk)"
+  name="group-1"
   selected="standard"
   on:change="{(e) => {
     console.log(e.detail); // string
@@ -16,6 +17,7 @@
 
 <RadioButtonGroup
   legendText="Storage tier (disk)"
+  name="group-2"
   labelPosition="left"
   selected="standard"
 >
@@ -24,7 +26,11 @@
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
-<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
+<RadioButtonGroup
+  orientation="vertical"
+  legendText="Storage tier (disk)"
+  name="group-3"
+>
   <RadioButtonSkeleton />
   <RadioButtonSkeleton />
   <RadioButtonSkeleton />

diff --git a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
@@ -26,7 +26,7 @@ export interface RadioButtonGroupProps extends RestProps {
    * Specify a name attribute for the radio button inputs
    * @default undefined
    */
-  name?: string;
+  name: string;
 
   /**
    * Specify the legend text