---
schema_version: "1"
id: 5bbbe35831ea921c60603e20f028bf21b2b9de17c21131b324ae2bb65e8f9954
title: Phone 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_phone.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.flow_ref_elements_screencmp_phone.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 6ccb48cf7e48f8b8eecc7a9735e057a6102ad51013f77271a9e5735730bff4ba
description: Let users enter phone number values from a flow screen.
products:
  - Flow Builder
  - Salesforce Platform
release: "264"
---
# Phone Screen Input Component

Let users enter phone number values from 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 Phone component that lets the flow user enter a cell phone number. The placeholder text guides the user to use a particular phone number format.](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_phone.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 Phone 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="d285894e83">Attribute</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d285894e86">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e83 ">
              <strong class="uicontrol">API Name</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e86 ">
              <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="d285894e83 ">
              <strong class="uicontrol">Label</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e86 ">
              <p>The label that appears above the phone field.</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="d285894e83 ">
              <strong class="uicontrol">Disabled</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e86 ">
              <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="d285894e83 ">
              <strong class="uicontrol">Pattern</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e86 ">
              <p>Determines whether the value is valid. By default, there’s no pattern.</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="d285894e83 ">
              <strong class="uicontrol">Placeholder Text</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e86 ">
              <p>Text that appears in the
                field when it’s empty. Use placeholder text to give users a hint about what to enter
                in the field.</p>
              <p style="margin-bottom:0;">This attribute accepts a resource with a single value. The value is
                treated as text.</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e86 ">
              <p>If set to true, the user can’t
                modify the value, but the user can copy it. 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="d285894e83 ">
              <strong class="uicontrol">Required</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e86 ">
              <p>If set to true, the running user
                must enter a 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="d285894e83 ">
              <strong class="uicontrol">Value</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e86 ">
              <p>The value of the phone field. <span>Setting this attribute prepopulates the field. To use
                  the value that the user enters, store this attribute’s output in a variable.</span></p>
              <p style="margin-bottom:0;">This attribute accepts single-value resources. The value is treated as
                text.</p>
            </td>

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

## Store the Phone 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 phone number that the user entered, map the Value attribute to a flow 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.

## 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="d285894e288">Option</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d285894e291">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e288 ">
              <strong class="uicontrol">When to Display Component</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e291 ">
              <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="d285894e379">Option</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d285894e382">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e379 ">
              <strong class="uicontrol">Error Message</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e382 ">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="d285894e379 ">
              <strong class="uicontrol">Formula</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e382 ">
              <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="d285894e453">Option</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d285894e456">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d285894e453 ">
              <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="d285894e456 ">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="d285894e453 ">
              <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="d285894e456 ">
              <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_phone__d5328e119"><a name="flow_ref_elements_screencmp_phone__d5328e119"><!-- --></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.")