diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 4544165194..8999c645ab 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2967,7 +2967,7 @@ None.
| selected | No | let | Yes | string | number | undefined | Set the selected radio button value |
| disabled | No | let | No | boolean | false | Set to `true` to disable the radio buttons |
| required | No | let | No | boolean | undefined | Set to `true` to require the selection of a radio button |
-| name | No | let | No | string | undefined | Specify a name attribute for the radio button inputs |
+| name | Yes | let | No | string | undefined | Specify a name attribute for the radio button inputs |
| legendText | No | let | No | string | "" | Specify the legend text |
| hideLegend | No | let | No | boolean | false | Set to `true` to visually hide the legend |
| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 601783022f..19eec6455c 100644
--- 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
index 7dd0f43d34..17ca12ef6f 100644
--- 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'
+ );
}}"
>
+
@@ -87,8 +87,8 @@ Use the `selected` prop to bind and update the selected value.
## Skeleton (vertical)
-
+
-
\ No newline at end of file
+
diff --git a/docs/src/pages/framed/Theme/Theme.svelte b/docs/src/pages/framed/Theme/Theme.svelte
index b99cb54071..f6b24830ff 100644
--- a/docs/src/pages/framed/Theme/Theme.svelte
+++ b/docs/src/pages/framed/Theme/Theme.svelte
@@ -10,7 +10,11 @@
-
+
{#each ["white", "g10", "g80", "g90", "g100"] as value}
{/each}
diff --git a/docs/src/pages/framed/Theme/ThemePersist.svelte b/docs/src/pages/framed/Theme/ThemePersist.svelte
index bd43a91a08..7b688d7db2 100644
--- a/docs/src/pages/framed/Theme/ThemePersist.svelte
+++ b/docs/src/pages/framed/Theme/ThemePersist.svelte
@@ -10,7 +10,11 @@
-
+
{#each ["white", "g10", "g80", "g90", "g100"] as value}
{/each}
diff --git a/docs/src/pages/framed/_reset.svelte b/docs/src/pages/framed/_reset.svelte
index e261ca450a..27f9ace092 100644
--- 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"
+ );
}
}
diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index ffecc04d02..c3558686da 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -128,6 +128,7 @@
{#each ["white", "g10", "g80", "g90", "g100"] as value}
diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte
index 233faf28c5..4382bd0f04 100644
--- 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"))
+ );
+ }
+ }
+ }