diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 671f75d5..6bef1bd4 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4347,6 +4347,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| labelA | No | let
| No | string
| "Off"
| Specify the label for the untoggled state |
| labelB | No | let
| No | string
| "On"
| Specify the label for the toggled state |
| 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
| undefined
| Specify a name attribute for the checkbox input |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 88e67162..8786b33e 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -13494,6 +13494,18 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "hideLabel",
+ "kind": "let",
+ "description": "Set to `true` to visually hide the label text",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "id",
"kind": "let",
diff --git a/docs/src/pages/components/Toggle.svx b/docs/src/pages/components/Toggle.svx
index dbdca10c..0ace0682 100644
--- a/docs/src/pages/components/Toggle.svx
+++ b/docs/src/pages/components/Toggle.svx
@@ -23,6 +23,12 @@ components: ["Toggle", "ToggleSkeleton"]
console.log(e.detail)} />
+### Hidden label text
+
+Set `hideLabel` to `true` to visually hide the label text. It's recommended to still specify `labelText` for screen reader accessibility.
+
+
+
### Custom labels
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
index 2ef58b0e..786e755a 100644
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@@ -24,6 +24,9 @@
/** Specify the label text */
export let labelText = "";
+ /** Set to `true` to visually hide the label text */
+ export let hideLabel = false;
+
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
@@ -76,9 +79,11 @@
for="{id}"
class:bx--toggle-input__label="{true}"
>
-
- {labelText}
-
+
+
+ {labelText}
+
+
diff --git a/tests/Toggle.test.svelte b/tests/Toggle.test.svelte
index d5af2c9e..55bf0baf 100644
--- a/tests/Toggle.test.svelte
+++ b/tests/Toggle.test.svelte
@@ -2,7 +2,7 @@
import { Toggle, ToggleSkeleton } from "../types";
-
+