---
schema_version: "1"
id: cda4faeb1618f1727289bcdd4f871344de58d2fc4ef11347c5d60c5e9d3381ae
title: Flexcards Toggle Style Properties (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_flexcards_toggle_style_properties.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_toggle_style_properties.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: e99a26f40582d5e1d000af6094c686b147f52229e2adb0c347414179884d5b92
description: For the managed package runtime, configure style properties specific to the Toggle element from the Style panel in the Flexcard Designer.
products:
  - Omnistudio
release: "264"
---
# Flexcards Toggle Style Properties (Managed Package)

For the managed package runtime, configure style properties specific to the Toggle element from the Style panel in the Flexcard Designer.

![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).

To configure additional style properties common to all elements, see [Style Flexcard Elements (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements.htm&release=264.0.0&type=5 "For the managed package runtime, configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states. From the Style panel in the Flexcard Designer, design backgrounds, text, and borders; adjust heights, widths, and spacing inside and between elements; apply classes and inline styles; make your element responsive; and more.").

## Checkbox and Stateful Button Properties

These properties are unique to the all but the Stateful Icon toggle type.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d340440e66">
              <p style="margin-bottom:0;">Property</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d340440e72">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e66 ">
              <p style="margin-bottom:0;">Font Family</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e72 ">
              <p style="margin-bottom:0;">Enter one or more web-safe, SLDS, or Newport Design System fonts. Supports the font-family CSS property options. For example, enter a specific font, such as <kbd>Courier New</kbd>; a general font, such as <kbd>serif</kbd>; or a fallback list, such <kbd>Times New Roman, Courier New, serif</kbd>.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e66 ">
              <p style="margin-bottom:0;">Font Size</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e72 ">
              <p style="margin-bottom:0;">Select a font-size. Enter any value allowed by the <code>font-size</code> CSS property, such as <strong class="uicontrol">1em</strong>, <strong class="uicontrol">6px</strong>, <kbd>large</kbd>, or <kbd>calc()</kbd>. If you enter just a number, the default unit used is <code>px</code>.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e66 ">
              <p style="margin-bottom:0;">Text Decoration</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e72 ">
              <p style="margin-bottom:0;">Set the appearance of decorative lines on the text. Enter a value allowed by the <code>text-decoration</code> CSS property, such as <kbd>underline</kbd> and <kbd>overline</kbd>.</p>
            </td>

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

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_important.png)

Important

The **Font Size** property isn’t available for the Checkbox Toggle and Checkbox Button toggle types in the Vlocity Health and Insurance Spring '21 release.

## Checkbox Button, Group and Toggle Properties

These properties are unique to the Checkbox Toggle, Checkbox Button, Checkbox Group Button, Checkbox Group toggle types.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d340440e195">
              <p style="margin-bottom:0;">Property</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d340440e201">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e195 ">
              <p style="margin-bottom:0;">Text Align</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e201 ">
              <p style="margin-bottom:0;">Select text alignment, such as <strong class="uicontrol">center</strong>.</p>
            </td>

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

## Checkbox Button and Toggle Properties

These properties are unique to the Checkbox Toggle and Checkbox Button toggle types.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d340440e251">
              <p style="margin-bottom:0;">Property</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d340440e257">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e251 ">
              <p style="margin-bottom:0;">Checked Label</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e257 ">
              <p style="margin-bottom:0;">Select the display color of the label when the toggle element is selected. Enter a Hex color code or click the colored box to select a color from the color picker.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e251 ">
              <p style="margin-bottom:0;">Unchecked Label</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e257 ">
              <p style="margin-bottom:0;">Select the display color of the label when the toggle element isn’t selected. Enter a Hex color code or click the colored box to select a color from the color picker.</p>
            </td>

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

## Checkbox Button Properties

These properties are unique to the Checkbox Button toggle type.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d340440e319">
              <p style="margin-bottom:0;">Property</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d340440e325">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e319 ">
              <p style="margin-bottom:0;">Checked Icon</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e325 ">
              <p style="margin-bottom:0;">Select the display color when the toggle element is selected. Enter a Hex color code or click the colored box to select a color from the color picker.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e319 ">
              <p style="margin-bottom:0;">Unchecked Icon</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e325 ">
              <p style="margin-bottom:0;">Select the display color when the toggle element isn’t selected. Enter a Hex color code or click the colored box to select a color from the color picker.</p>
            </td>

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

## Checkbox Group and Stateful Button Properties

These properties are unique to the Checkbox Group Button, Checkbox Group, Stateful Button, and Dual Stateful Button toggle types.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d340440e388">
              <p style="margin-bottom:0;">Property</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d340440e394">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e388 ">
              <p style="margin-bottom:0;">Color</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340440e394 ">
              <p style="margin-bottom:0;">Select a label color. Enter a Hex color code or click the colored box to select a color from the color picker.</p>
            </td>

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