fix(tile-group): add name and required props

COMPONENT_INDEX.md

@@ -3019,11 +3019,12 @@ None.
 | checked         | No       | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>                               | Set to `true` to check the tile                          |
 | light           | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to enable the light variant                |
 | disabled        | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to disable the tile                        |
+| required        | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to mark the field as required              |
 | value           | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the value of the radio input                     |
 | tabindex        | No       | <code>let</code> | No       | <code>string</code>  | <code>"0"</code>                                 | Specify the tabindex                                     |
 | iconDescription | No       | <code>let</code> | No       | <code>string</code>  | <code>"Tile checkmark"</code>                    | Specify the ARIA label for the radio tile checkmark icon |
 | id              | No       | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                          |
-| name            | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify a name attribute for the input                   |
+| name            | No       | <code>let</code> | No       | <code>string</code>  | <code>undefined</code>                           | 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                             |
+| Prop name | Required | Kind             | Reactive | Type                 | Default value          | Description                                              |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------- |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | -------------------------------------------------------- |
-| selected  | No       | <code>let</code> | Yes      | <code>string</code>  | <code>undefined</code> | Specify the selected tile value         |
+| selected  | No       | <code>let</code> | Yes      | <code>string</code>  | <code>undefined</code> | Specify the selected tile value                          |
-| disabled  | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to disable the tile group |
+| disabled  | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to disable the tile group                  |
-| legend    | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>        | Specify the legend text                 |
+| required  | No       | <code>let</code> | No       | <code>boolean</code> | <code>undefined</code> | Set to `true` to require the selection of a radio button |
+| name      | No       | <code>let</code> | No       | <code>string</code>  | <code>undefined</code> | Specify a name attribute for the radio button inputs     |
+| legend    | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>        | Specify the legend text                                  |
 
 ### Slots
 

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",

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 @@
 <input
   type="radio"
   id="{id}"
-  name="{name}"
+  name="{$groupName ?? name}"
   value="{value}"
   checked="{checked}"
   tabindex="{disabled ? undefined : tabindex}"
   disabled="{disabled}"
+  required="{$groupRequired ?? required}"
   class:bx--tile-input="{true}"
   on:change
   on:change="{() => {

src/Tile/TileGroup.svelte

@@ -8,17 +8,33 @@
   /** Set to `true` to disable the tile group */
   export let disabled = false;
 
+  /**
+   * Set to `true` to require the selection of a radio button
+   * @type {boolean}
+   */
+  export let required = undefined;
+
+  /**
+   * Specify a name attribute for the radio button inputs
+   * @type {string}
+   */
+  export let name = undefined;
+
   /** Specify the legend text */
   export let legend = "";
 
   import { createEventDispatcher, setContext } from "svelte";
-  import { writable } from "svelte/store";
+  import { writable, readonly } from "svelte/store";
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
+  const groupName = writable(name);
+  const groupRequired = writable(required);
 
   setContext("TileGroup", {
     selectedValue,
+    groupName: readonly(groupName),
+    groupRequired: readonly(groupRequired),
     add: ({ checked, value }) => {
       if (checked) {
         selectedValue.set(value);
@@ -32,6 +48,8 @@
 
   $: selected = $selectedValue;
   $: selectedValue.set(selected);
+  $: $groupName = name;
+  $: $groupRequired = required;
 </script>
 
 <fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>

tests/RadioTile.test.svelte

@@ -2,14 +2,8 @@
   import { TileGroup, RadioTile } from "../types";
 </script>
 
-<TileGroup legend="Service pricing tiers">
+<TileGroup name="plan" required legend="Service pricing tiers">
-  <RadioTile value="0" checked>Lite plan</RadioTile>
+  <RadioTile light value="0" checked>Lite plan</RadioTile>
   <RadioTile value="1">Standard plan</RadioTile>
   <RadioTile value="2">Plus plan</RadioTile>
 </TileGroup>
-
-<TileGroup legend="Service pricing tiers">
-  <RadioTile light value="0" checked>Lite plan</RadioTile>
-  <RadioTile light value="1">Standard plan</RadioTile>
-  <RadioTile light value="2">Plus plan</RadioTile>
-</TileGroup>

types/Tile/RadioTile.svelte.d.ts

@@ -22,6 +22,12 @@ export interface RadioTileProps extends RestProps {
    */
   disabled?: boolean;
 
+  /**
+   * Set to `true` to mark the field as required
+   * @default false
+   */
+  required?: boolean;
+
   /**
    * Specify the value of the radio input
    * @default ""
@@ -47,8 +53,8 @@ export interface RadioTileProps extends RestProps {
   id?: string;
 
   /**
-   * Specify a name attribute for the input
+   * Specify a name attribute for the radio tile input
-   * @default ""
+   * @default undefined
    */
   name?: string;
 

types/Tile/TileGroup.svelte.d.ts

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