Add name and required to RadioButtonGroup.

Properties will be inherited in `RadioButton` unless the respective property is set there.

Fixes #1036.

docs/src/COMPONENT_API.json

@@ -9523,6 +9523,28 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "required",
+          "kind": "let",
+          "description": "Set to `true` to require the selection of a radio button",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "name",
+          "kind": "let",
+          "description": "Specify a name attribute for the radio button inputs",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "legendText",
           "kind": "let",

src/RadioButton/RadioButton.svelte

@@ -35,13 +35,16 @@
   import { getContext } from "svelte";
   import { writable } from "svelte/store";
 
-  const ctx = getContext("RadioButtonGroup");
+  const { add, update, selectedValue, groupName, groupRequired } = getContext(
-  const selectedValue = ctx
+    "RadioButtonGroup"
-    ? ctx.selectedValue
+  ) ?? {
-    : writable(checked ? value : undefined);
+    groupName: writable(name),
+    groupRequired: writable(required),
+    selectedValue: writable(checked ? value : undefined),
+  };
 
-  if (ctx) {
+  if (add) {
-    ctx.add({ id, checked, disabled, value });
+    add({ id, checked, disabled, value });
   }
 
   $: checked = $selectedValue === value;
@@ -56,16 +59,16 @@
     bind:this="{ref}"
     type="radio"
     id="{id}"
-    name="{name}"
+    name="{'name' in $$props ? name : $groupName}"
     checked="{checked}"
     disabled="{disabled}"
-    required="{required}"
+    required="{'required' in $$props ? required : $groupRequired}"
     value="{value}"
     class:bx--radio-button="{true}"
     on:change
     on:change="{() => {
-      if (ctx) {
+      if (update) {
-        ctx.update(value);
+        update(value);
       }
     }}"
   />

src/RadioButtonGroup/RadioButtonGroup.svelte

@@ -8,6 +8,12 @@
   /** Set to `true` to disable the radio buttons */
   export let disabled = false;
 
+  /** Set to `true` to require the selection of a radio button */
+  export let required = false;
+
+  /** Specify a name attribute for the radio button inputs */
+  export let name = "";
+
   /** Specify the legend text */
   export let legendText = "";
 
@@ -42,9 +48,13 @@
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
+  const groupName = writable(name);
+  const groupRequired = writable(required);
 
   setContext("RadioButtonGroup", {
     selectedValue,
+    groupName: { subscribe: groupName.subscribe },
+    groupRequired: { subscribe: groupRequired.subscribe },
     add: ({ checked, value }) => {
       if (checked) {
         selectedValue.set(value);
@@ -67,6 +77,9 @@
     selected = value;
     dispatch("change", value);
   });
+
+  $: $groupName = name;
+  $: $groupRequired = required;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->

types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts

@@ -16,6 +16,18 @@ export interface RadioButtonGroupProps extends RestProps {
    */
   disabled?: boolean;
 
+  /**
+   * Set to `true` to require the selection of a radio button
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Specify a name attribute for the radio button inputs
+   * @default ""
+   */
+  name?: string;
+
   /**
    * Specify the legend text
    * @default ""