---
schema_version: "1"
id: b3426eff765eaf7e7b58b702dd31b6a9ecf96d27c39806cb0ec58fac0d5cb56a
title: Toggle Screen Input Component
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/flow_ref_elements_screencmp_toggle.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.flow_ref_elements_screencmp_toggle.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: a201be1ed483e7de5b0414b2d946acc368d7f064762820a0abb98fc875899db5
description: Let users flip a toggle in a flow screen.
products:
  - Flow Builder
  - Salesforce Platform
release: "264"
---
# Toggle Screen Input Component

Let users flip a toggle in a flow screen.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;"><a href="https://help.salesforce.com/s/articleView?id=platform.flow_ref_supported_editions.htm&amp;release=264.0.0&amp;type=5" title="Learn about the editions and user interfaces that support Flow Builder. Some Flow Builder features integrate with other Salesforce products that require additional licenses.">View supported editions.</a></td></tr></tbody></table>

![A Toggle component that lets the flow user opt in to marketing emails.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-platform_automation-264-0-0-production-enus/60568438-ec7e-4665-acd1-7c80dcbe60d5/platform_automation/images/flow/flow_screencmp_toggle.png)

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-platform_automation-264-0-0-production-enus/60568438-ec7e-4665-acd1-7c80dcbe60d5/images/icon_note.png)

Note This screen component requires Lightning runtime.

## Configure the Toggle Component

You can select resources from the flow, such as variables or global constants, or you can manually enter a value.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:24%">
          <col style="width:76%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134901e83">Attribute</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134901e86">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e83 ">
              <strong class="uicontrol">Active Label</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e86 ">
              <p>When the toggle is active, this label appears underneath the toggle. Use it to clarify
                what active means. The default label is “Active.”</p>
              <p style="margin-bottom:0;">This attribute accepts single-value
                resources. The value is treated as text.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e83 ">
              <strong class="uicontrol">API Name</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e86 ">
              <p>The API name of the component.</p>
              <p style="margin-bottom:0;">An API name can include underscores and alphanumeric characters without spaces.
                It must begin with a letter and can’t end with an underscore. It also can’t have
                two consecutive underscores.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e83 ">
              <strong class="uicontrol">Disabled</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e86 ">
              <p>If set to true, the user can’t
                modify the value. The default value is false.</p>
              <p style="margin-bottom:0;">This attribute accepts a resource
                with a Boolean value.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e83 ">
              <strong class="uicontrol">Inactive Label</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e86 ">
              <p>When the toggle is inactive, this label appears underneath the toggle. Use it to
                clarify what inactive means. The default label is “Inactive.”</p>
              <p style="margin-bottom:0;">This attribute accepts
                single-value resources. The value is treated as text.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e83 ">
              <strong class="uicontrol">Label</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e86 ">
              <p>This label appears next to the toggle and describes what the user is enabling.</p>
              <p style="margin-bottom:0;">This
                attribute accepts single-value resources. The value is treated as text.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e83 ">
              <strong class="uicontrol">Value</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e86 ">
              <p>Whether the toggle is active (<kbd>$GlobalConstant.True</kbd>) or inactive
                (<kbd>$GlobalConstant.False</kbd>). Setting this attribute from the Inputs tab
                controls the default state of the toggle. To store the user’s selection in a flow variable,
                set this attribute from the Outputs tab.</p>
              <p style="margin-bottom:0;">This parameter accepts single-value Boolean
                resources.</p>
            </td>

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

## Store the Toggle Component’s Values in the Flow

The flow stores values automatically. If you store values manually, store the attribute’s output value in a variable.

To store values manually, select **Manually assign variables (advanced)**.

All attributes are available to store in flow variables, but Value is the most likely attribute you must store.

To store the user’s selection, map the Value attribute to a Boolean flow variable or a checkbox field on a record variable.

![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-platform_automation-264-0-0-production-enus/60568438-ec7e-4665-acd1-7c80dcbe60d5/images/icon_tip.png)

Tip By default, screen components that run on Lightning runtime version 58 and prior have no memory. If a user enters a value, and then does one of the following, the value is lost.

- Navigates to another screen and returns to the component’s screen.
- Pauses the flow then resumes it.
- Navigates to the next screen and triggers an input validation error.

Setting the attribute enables a flow to remember the value. The flow stores the value automatically. If you store values manually, store the attribute’s output value in a variable.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-platform_automation-264-0-0-production-enus/60568438-ec7e-4665-acd1-7c80dcbe60d5/images/icon_note.png)

Note In flows configured to run on API version 64.0 or later, you can use the Is Null operator when referencing Boolean (Checkbox and Toggle) screen components in a conditional visibility expression. In earlier API versions, expressions with the Is Null operator don’t identify when Boolean screen components are null.

## Set the Component Visibility

Specify the logic that determines when the flow displays the component.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:24%">
          <col style="width:76%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134901e270">Option</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134901e273">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e270 ">
              <strong class="uicontrol">When to Display Component</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e273 ">
              <p>Configure when the component is displayed by using conditional logic. </p>
              <p>You can set the components to:</p>
              <dl>

                <dt style="font-weight:bold;padding-top:.25rem;">Always</dt>

                <dd style="padding-left:1.5rem;padding-bottom:.5rem;">Always display the component.</dd>


                <dt style="font-weight:bold;padding-top:.25rem;">When all conditions are met (AND)</dt>

                <dd style="padding-left:1.5rem;padding-bottom:.5rem;">Display the component when all of the conditions that you define are met.
                  Define at least one condition.</dd>


                <dt style="font-weight:bold;padding-top:.25rem;">When any condition is met (OR)</dt>

                <dd style="padding-left:1.5rem;padding-bottom:.5rem;">Display the component when at least one of the conditions that you define is
                  met. Define at least one condition.</dd>


                <dt style="font-weight:bold;padding-top:.25rem;">When custom conditional logic is met</dt>

                <dd style="padding-left:1.5rem;padding-bottom:.5rem;">Display the component when the condition logic that you define is met.
                  Define at least one condition and specify condition logic.</dd>

              </dl>
            </td>

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

## Validate Input

Provide a formula that evaluates whether what the user entered is valid and the error message to display if invalid.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:24%">
          <col style="width:76%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134901e362">Option</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134901e365">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e362 ">
              <strong class="uicontrol">Error Message</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e365 ">Specify the error message that appears below the component if the user enters
              an invalid value.</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e362 ">
              <strong class="uicontrol">Formula</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e365 ">
              <p>Provide a formula expression that returns a Boolean value.</p>
              <p>If the formula expression evaluates to <samp>true</samp>, the
                input is valid. If the formula expression evaluates to
                <samp>false</samp>, the error message appears below the
                component.
              </p>
              <p style="margin-bottom:0;">If the user leaves the field blank and the field isn’t required, the flow doesn’t
                perform the validation. If the user leaves the field blank and the field is
                required, the flow shows the default error message and not your custom error
                message.</p>
            </td>

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

## Specify the Behavior of Values on Revisited Screens

Specify what this component does when a user enters a value, navigates to a previous screen, and then returns to the screen with this component.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:24%">
          <col style="width:76%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134901e435">Option</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d134901e438">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e435 ">
              <strong class="uicontrol">Use values from when the user last visited this screen</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e438 ">The component retains the values that the user specified and doesn’t update the
              values to reflect changes made on previous screens.</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e435 ">
              <strong class="uicontrol">Refresh inputs to incorporate changes elsewhere in the flow</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d134901e438 ">
              <p>The component updates the user-specified values to reflect changes made on
                previous screens.</p>
              <p style="margin-bottom:0;" id="flow_ref_elements_screencmp_toggle__d3714e119"><a name="flow_ref_elements_screencmp_toggle__d3714e119"><!-- --></a>If you pause and then
                resume the flow, the flow retains user-specified values only in Checkbox, Checkbox
                Group, Currency, Long Text Area, Multi-Select Picklist, Number, Password,
                Picklist, Radio Buttons, and Text components.</p>
            </td>

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

#### See Also

- [Standard Flow Screen Components](https://help.salesforce.com/s/articleView?id=platform.flow_ref_elements_screencmp.htm&release=264.0.0&type=5 "Salesforce provides several standard screen components that extend the types of input fields available in screens.")