---
schema_version: "1"
id: 0d32f2e4ff5de1df7599940bbadf672201f5109f117fed1eb372a1c1440d90a6
title: Visual Picker 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_visual_picker.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.flow_ref_elements_screencmp_visual_picker.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 07455cd4c869bfcd131f920ae68b6e5068706790ceefbb283ae597a4cf9c7d51
description: Use the visual picker screen component to make option selection even simpler. Your users can select tiles that combine text with icons instead of scrolling through dropdown menus at run time.
products:
  - Flow Builder
  - Salesforce Platform
release: "264"
---
# Visual Picker Screen Input Component

Use the visual picker screen component to make option selection even simpler. Your users can select tiles that combine text with icons instead of scrolling through dropdown menus at run time.

### 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>

## Configure the Visual Picker Component

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d188601e65">Attribute</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d188601e68">description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d188601e65 ">Label</td>

            <td data-label="description" class="slds-cell-wrap" style="vertical-align:top;" headers="d188601e68 ">User-friendly text that appears above the component</td>

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

            <td data-label="description" class="slds-cell-wrap" style="vertical-align:top;" headers="d188601e68 ">The API name of the component<span>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.</span></td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d188601e65 ">Require</td>

            <td data-label="description" class="slds-cell-wrap" style="vertical-align:top;" headers="d188601e68 ">Requires users to select an option before they can move to the next
              screen</td>

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

            <td data-label="description" class="slds-cell-wrap" style="vertical-align:top;" headers="d188601e68 ">
              <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="d188601e65 ">Visual Picker Size</td>

            <td data-label="description" class="slds-cell-wrap" style="vertical-align:top;" headers="d188601e68 ">Enter the size of the tile within the visual picker component. Valid values are
              small, medium, or large. The default tile size is medium.</td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d188601e65 ">Let Users Select Multiple Options</td>

            <td data-label="description" class="slds-cell-wrap" style="vertical-align:top;" headers="d188601e68 ">Specifies whether the user can select one option or multiple options</td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d188601e65 ">Choice</td>

            <td data-label="description" class="slds-cell-wrap" style="vertical-align:top;" headers="d188601e68 ">
              <p>Add one or more static Choice resources to the visual picker component.</p>
              <p>You
                can select choice resources of only the text data type in a Visual Picker
                component.</p>
              <p>Choices with icons appear as tiles at run time.</p>
              <p style="margin-bottom:0;">You can’t
                reorder choices or add the same choice twice.</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d188601e176 ">
              <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>

## Specify the Behavior of Values on Revisited Screens

Specify what this component does when a user selects an option, navigates to a previous screen, and then returns to the screen with this component.

 
| Option | Description |
| --- | --- |
| Use values from when the user last visited this screen | The component retains the values that the user specified and doesn’t update the values to reflect changes made on previous screens. |
| Refresh inputs to incorporate changes elsewhere in the flow | The component updates the user-specified values to reflect changes made on previous screens. |

## Considerations

- The visual picker component is supported in all screen-based flows except Field Service Mobile, Data Capture, Discovery Framework, and Surveys.
- The visual picker component supports choice resources of only the text data type.
- The visual picker component supports only static choice resources. Collection Choice Sets, Picklist Choice Sets, and Record Choice Sets are unsupported resources.
- Visual Picker displays only plain text labels for your choices. It doesn’t show any rich text formatting applied to the choice labels in the choice resources.

#### See Also

- [Flow Resource: Choice](https://help.salesforce.com/s/articleView?id=platform.flow_ref_resources_choice.htm&language=en_US)