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