diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index f00828c0..4f690026 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1580,7 +1580,7 @@ None.
| expandedByDefault | No | let
| No | boolean
| true
| Set to `false` to hide the side nav by default |
| uiShellAriaLabel | No | let
| No | string
| undefined
| Specify the ARIA label for the header |
| href | No | let
| No | string
| undefined
| Specify the `href` attribute |
-| company | No | let
| No | string
| undefined
| Specify the company name.
Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) |
+| company | No | let
| No | string
| undefined
| Specify the company name.
Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) |
| platformName | No | let
| No | string
| ""
| Specify the platform name.
Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) |
| persistentHamburgerMenu | No | let
| No | boolean
| false
| Set to `true` to persist the hamburger menu |
| expansionBreakpoint | No | let
| No | number
| 1056
| The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 |
@@ -2944,7 +2944,7 @@ 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 |
+| name | No | let
| No | string
| undefined
| Specify a name attribute for the radio button input |
### Slots
@@ -2962,15 +2962,17 @@ 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 |
+| 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 |
+| 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 |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 2ee1d7e5..b65ce5a5 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -4788,7 +4788,7 @@
{
"name": "company",
"kind": "let",
- "description": "Specify the company name. \nAlternatively, use the named slot \"company\" (e.g., `...`)",
+ "description": "Specify the company name.\n\nAlternatively, use the named slot \"company\" (e.g., `...`)",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
@@ -9463,7 +9463,6 @@
"kind": "let",
"description": "Specify a name attribute for the radio button input",
"type": "string",
- "value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -9523,6 +9522,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": "legendText",
"kind": "let",
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 16008edc..0aee1350 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -224,9 +224,9 @@
class:bx--label="{true}"
class:bx--label--disabled="{disabled}"
>
-
- {titleText}
-
+
+ {titleText}
+
{/if}
-
- {titleText}
-
+
+ {titleText}
+
{/if}
diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
index 60b4fbb1..7ae8a455 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -8,6 +8,18 @@
/** Set to `true` to disable the radio buttons */
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 legendText = "";
@@ -38,13 +50,17 @@
onMount,
setContext,
} from "svelte";
- import { writable } from "svelte/store";
+ import { readonly, writable } from "svelte/store";
const dispatch = createEventDispatcher();
const selectedValue = writable(selected);
+ const groupName = writable(name);
+ const groupRequired = writable(required);
setContext("RadioButtonGroup", {
selectedValue,
+ groupName: readonly(groupName),
+ groupRequired: readonly(groupRequired),
add: ({ checked, value }) => {
if (checked) {
selectedValue.set(value);
@@ -67,6 +83,9 @@
selected = value;
dispatch("change", value);
});
+
+ $: $groupName = name;
+ $: $groupRequired = required;
diff --git a/src/UIShell/Header.svelte b/src/UIShell/Header.svelte
index 4dd361aa..3574f01e 100644
--- a/src/UIShell/Header.svelte
+++ b/src/UIShell/Header.svelte
@@ -17,8 +17,9 @@
*/
export let href = undefined;
- /**
- * Specify the company name.
+ /**
+ * Specify the company name.
+ *
* Alternatively, use the named slot "company" (e.g., `...`)
* @type {string}
*/
diff --git a/types/RadioButton/RadioButton.svelte.d.ts b/types/RadioButton/RadioButton.svelte.d.ts
index 5413720e..f7916428 100644
--- a/types/RadioButton/RadioButton.svelte.d.ts
+++ b/types/RadioButton/RadioButton.svelte.d.ts
@@ -54,7 +54,7 @@ export interface RadioButtonProps extends RestProps {
/**
* Specify a name attribute for the radio button input
- * @default ""
+ * @default undefined
*/
name?: string;
diff --git a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
index 779ade41..0e259fde 100644
--- a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
+++ b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
@@ -16,6 +16,18 @@ export interface RadioButtonGroupProps 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 ""
diff --git a/types/UIShell/Header.svelte.d.ts b/types/UIShell/Header.svelte.d.ts
index a4a71ae1..f16a2862 100644
--- a/types/UIShell/Header.svelte.d.ts
+++ b/types/UIShell/Header.svelte.d.ts
@@ -30,6 +30,7 @@ export interface HeaderProps extends RestProps {
/**
* Specify the company name.
+ *
* Alternatively, use the named slot "company" (e.g., `...`)
* @default undefined
*/