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} + +