diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 46ab0b78..4b3eccc7 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3019,11 +3019,12 @@ None.
| checked | No | let
| Yes | boolean
| false
| Set to `true` to check the tile |
| light | No | let
| No | boolean
| false
| Set to `true` to enable the light variant |
| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the tile |
+| required | No | let
| No | boolean
| false
| Set to `true` to mark the field as required |
| value | No | let
| No | string
| ""
| Specify the value of the radio input |
| tabindex | No | let
| No | string
| "0"
| Specify the tabindex |
| iconDescription | No | let
| No | string
| "Tile checkmark"
| Specify the ARIA label for the radio tile checkmark icon |
| 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 input |
+| name | No | let
| No | string
| undefined
| Specify a name attribute for the radio tile input |
### Slots
@@ -4234,11 +4235,13 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------- |
-| selected | No | let
| Yes | string
| undefined
| Specify the selected tile value |
-| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the tile group |
-| legend | No | let
| No | string
| ""
| Specify the legend text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | -------------------------------------------------------- |
+| selected | No | let
| Yes | string
| undefined
| Specify the selected tile value |
+| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the tile group |
+| 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 |
+| legend | No | let
| No | string
| ""
| Specify the legend text |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index a2407cbb..84e1e4e0 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -9679,6 +9679,18 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "required",
+ "kind": "let",
+ "description": "Set to `true` to mark the field as required",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "value",
"kind": "let",
@@ -9730,9 +9742,8 @@
{
"name": "name",
"kind": "let",
- "description": "Specify a name attribute for the input",
+ "description": "Specify a name attribute for the radio tile input",
"type": "string",
- "value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -13110,6 +13121,28 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "required",
+ "kind": "let",
+ "description": "Set to `true` to require the selection of a radio button",
+ "type": "boolean",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "name",
+ "kind": "let",
+ "description": "Specify a name attribute for the radio button inputs",
+ "type": "string",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "legend",
"kind": "let",
diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte
index a8726832..2d1e741b 100644
--- a/src/Tile/RadioTile.svelte
+++ b/src/Tile/RadioTile.svelte
@@ -8,6 +8,9 @@
/** Set to `true` to disable the tile */
export let disabled = false;
+ /** Set to `true` to mark the field as required */
+ export let required = false;
+
/** Specify the value of the radio input */
export let value = "";
@@ -20,13 +23,23 @@
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
- /** Specify a name attribute for the input */
- export let name = "";
+ /**
+ * Specify a name attribute for the radio tile input
+ * @type {string}
+ */
+ export let name = undefined;
import { getContext } from "svelte";
+ import { readable } from "svelte/store";
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
- const { add, update, selectedValue } = getContext("TileGroup");
+ const { add, update, selectedValue, groupName, groupRequired } = getContext(
+ "TileGroup"
+ ) ?? {
+ groupName: readable(undefined),
+ groupRequired: readable(undefined),
+ selectedValue: readable(checked ? value : undefined),
+ };
add({ value, checked });
@@ -36,11 +49,12 @@
{
if (checked) {
selectedValue.set(value);
@@ -32,6 +48,8 @@
$: selected = $selectedValue;
$: selectedValue.set(selected);
+ $: $groupName = name;
+ $: $groupRequired = required;