---
schema_version: "1"
id: 80a947f9d5709ac7b4997304b1150117379f18cbdff05460846c663cd7f15a5e
title: Toggle Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_toggle_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_toggle_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 98d0ef5ac44938d6867e0fcbab9f234ac887257fef9d87e88ca6f943f8cb8fe3
description: For the managed package runtime, this page contains a Toggle LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# Toggle Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a Toggle LWC ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Summer '20

The _Toggle Lightning Web Component_ enables a user to pick between two states, enable or disable an option, or select multiple options. The Toggle LWC supports attributes available in the _CheckboxGroup Lightning Web Component_.

## Available c-toggle Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d155135e68">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d155135e74">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d155135e80">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d155135e86">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d155135e92">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e68 ">
              <p style="margin-bottom:0;">checked-label</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e74 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e92 ">
              <p style="margin-bottom:0;">Sets the label to display when the toggle is checked. Applies when <em>type</em> is set to 'icon', 'statefulButton', or 'dualStatefulButton'.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e68 ">
              <p style="margin-bottom:0;">icon-name</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e74 ">
              <p style="margin-bottom:0;">(Default: utility:check)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e92 ">
              <p style="margin-bottom:0;">Sets the icon of the toggle. Applies when <em>type</em> is set to 'statefulIcon'.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e68 ">
              <p style="margin-bottom:0;">icon-on-focus</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e74 ">
              <p style="margin-bottom:0;">(Default: utility:check)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e92 ">
              <p style="margin-bottom:0;">Sets the toggle icon to display on hover of the element. Applies when <em>type</em> is set to 'statefulButton'.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e68 ">
              <p style="margin-bottom:0;">label-on-focus</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e74 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e92 ">
              <p style="margin-bottom:0;">Sets the toggle label to use on hover of element. Applies when <em>type</em> is set to 'statefulButton'.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e68 ">
              <p style="margin-bottom:0;">toggle-disabled-label</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e74 ">
              <p style="margin-bottom:0;">(Default: Enabled)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e92 ">
              <p style="margin-bottom:0;">Sets the toggle label to display when the toggle is unchecked. Applies when <em>type</em> is set to 'toggle'.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e68 ">
              <p style="margin-bottom:0;">toggle-enabled-label</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e74 ">
              <p style="margin-bottom:0;">(Default: Enabled)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e92 ">
              <p style="margin-bottom:0;">Sets the toggle label to display when the toggle is checked. Applies when <em>type</em> is set to 'toggle'.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e68 ">
              <p style="margin-bottom:0;">type</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e74 ">
              <p style="margin-bottom:0;">button, checkbox, icon (Default: checkbox)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e86 ">
              <p style="margin-bottom:0;">yes</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e92 ">
              <p style="margin-bottom:0;">Sets the type of toggle element to display.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e68 ">
              <p style="margin-bottom:0;">unchecked-label</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e74 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e92 ">
              <p style="margin-bottom:0;">Sets the label to display when the toggle is unchecked. Applies When <em>type</em> is set to 'icon', 'statefulButton', or 'dualStatefulButton'.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e68 ">
              <p style="margin-bottom:0;">variant</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e74 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d155135e92 ">
              <p style="margin-bottom:0;">Sets the style of the toggle button based on the <em>type</em> supported by the chosen theme. For example, 'success', 'brand', and so on.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-toggle Component

```
<c-toggle
  name="vehicle"
  value="bike"
  options='[{"label":"car","value":"car"},{"label":"bike","value":"bike"},{"label":"ship","value":"ship"}]'
></c-toggle>
```

## Label Slot Usage

To dynamically insert markup next to the input's label, add a named slot (name = label).

## Example Label Slot Usage

```
<c-toggle
  name="vehicle"
  value="bike"
  options='[{"label":"car","value":"car"},{"label":"bike","value":"bike"},{"label":"ship","value":"ship"}]'
>
  <span slot="label">Additional markup is inserted here</span>
</c-toggle>
```

## Available Methods

Supports all methods available in the _CheckboxGroup Lightning Web Component_.