diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index f00828c0..f8f99034 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2936,6 +2936,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
| ref | No | let
| Yes | null | HTMLInputElement
| null
| Obtain a reference to the input HTML element |
+| name | No | let
| Yes | string
| ""
| Specify a name attribute for the radio button input |
| checked | No | let
| Yes | boolean
| false
| Set to `true` to check the radio button |
| value | No | let
| No | string
| ""
| Specify the value of the radio button |
| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the radio button |
@@ -2944,7 +2945,6 @@ None.
| labelText | No | let
| No | string
| ""
| Specify the label text |
| hideLabel | No | let
| No | boolean
| false
| Set to `true` to visually hide the label text |
| id | No | let
| No | string
| "ccs-" + Math.random().toString(36)
| Set an id for the input element |
-| name | No | let
| No | string
| ""
| Specify a name attribute for the radio button input |
### Slots
@@ -2962,15 +2962,16 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------- |
-| selected | No | let
| Yes | string
| undefined
| Set the selected radio button value |
-| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the radio buttons |
-| 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 |
-| orientation | No | let
| No | "horizontal" | "vertical"
| "horizontal"
| Specify the orientation of the radio buttons |
-| id | No | let
| No | string
| undefined
| Set an id for the container div element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | --------------------------------------------------------------- |
+| selected | No | let
| Yes | string
| undefined
| Set the selected radio button value |
+| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the radio buttons |
+| 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 |
+| orientation | No | let
| No | "horizontal" | "vertical"
| "horizontal"
| Specify the orientation of the radio buttons |
+| name | No | let
| No | string
| undefined
| Set a name for all radio button input elements within the group |
+| id | No | let
| No | string
| undefined
| Set an id for the container div element |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 2ee1d7e5..d94f30e9 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -9468,7 +9468,7 @@
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
- "reactive": false
+ "reactive": true
},
{
"name": "ref",
@@ -9571,6 +9571,17 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "name",
+ "kind": "let",
+ "description": "Set a name for all radio button input elements within the group",
+ "type": "string",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "id",
"kind": "let",
diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte
index cb6dd084..7a416a0c 100644
--- a/src/RadioButton/RadioButton.svelte
+++ b/src/RadioButton/RadioButton.svelte
@@ -32,7 +32,7 @@
/** Obtain a reference to the input HTML element */
export let ref = null;
- import { getContext } from "svelte";
+ import { getContext, onMount } from "svelte";
import { writable } from "svelte/store";
const ctx = getContext("RadioButtonGroup");
@@ -40,6 +40,18 @@
? ctx.selectedValue
: writable(checked ? value : undefined);
+ const unsubName = ctx?.name.subscribe((value) => {
+ // Use `name` if set on the `RadioButtonGroup`
+ if (value) {
+ name = value;
+ }
+ });
+ console.log(ctx)
+
+ onMount(() => {
+ return () => unsubName?.();
+ });
+
if (ctx) {
ctx.add({ id, checked, disabled, value });
}
diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
index 60b4fbb1..012fc75d 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -26,6 +26,12 @@
*/
export let orientation = "horizontal";
+ /**
+ * Set a name for all radio button input elements within the group
+ * @type {string}
+ */
+ export let name = undefined;
+
/**
* Set an id for the container div element
* @type {string}
@@ -42,9 +48,11 @@
const dispatch = createEventDispatcher();
const selectedValue = writable(selected);
+ const inputName = writable(name);
setContext("RadioButtonGroup", {
selectedValue,
+ name: inputName,
add: ({ checked, value }) => {
if (checked) {
selectedValue.set(value);
@@ -67,6 +75,8 @@
selected = value;
dispatch("change", value);
});
+
+ $: inputName.set(name);
diff --git a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
index 779ade41..7e45cfd5 100644
--- a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
+++ b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
@@ -40,6 +40,12 @@ export interface RadioButtonGroupProps extends RestProps {
*/
orientation?: "horizontal" | "vertical";
+ /**
+ * Set a name for all radio button input elements within the group
+ * @default undefined
+ */
+ name?: string;
+
/**
* Set an id for the container div element
* @default undefined