> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/vertical-visual-picker.md).

# Vertical Visual Picker

## Overview

<figure><img src="/files/027VqVuXLyC89QflbzGT" alt="" width="375"><figcaption></figcaption></figure>

The Vertical Visual Picker lets users choose one or multiple options from a vertically stacked list of rich, card-style items. Use it when options need more visual emphasis than standard radio buttons or checkboxes — for example, selecting a service plan, a product tier, or a workflow option.

***

## Configuration

To configure it, click the component on the Flow screen. The **Edit Vertical Visual Picker Component** panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Data Source

The **Data Source** setting determines where picker items come from.

| Data Source                                                      | Best For                              | When to Use                                                 |
| ---------------------------------------------------------------- | ------------------------------------- | ----------------------------------------------------------- |
| [**Manual**](/flow/component-builder/data-sources/manual.md)     | Fixed, pre-defined options            | Static choices that never change                            |
| [**Variable**](/flow/component-builder/data-sources/variable.md) | Items from a Flow collection variable | Options driven by prior flow steps                          |
| [**Picklist**](/flow/component-builder/data-sources/picklist.md) | A Salesforce picklist field's values  | Presenting a predefined set of options for selection        |
| [**Query**](/flow/component-builder/data-sources/query.md)       | Live Salesforce records               | Dynamic options fetched without a separate Get Records step |

### Data Mapping

When using Variable, Picklist, or Query, configure **Data Mappings** to tell the component which Salesforce fields map to which parts of each item — for example, mapping "Account Name" to the Title attribute.

<figure><img src="/files/bc0qLeTAyfxEPAMwd1CQ" alt=""><figcaption></figcaption></figure>

### Properties

**Label** sets the label displayed above the picker.

**Type** defines the selection behavior.

| Type                  | What it does                                             |
| --------------------- | -------------------------------------------------------- |
| **Radio** *(default)* | Single selection — only one item can be chosen at a time |
| **Checkbox**          | Multiple selection — users can pick more than one item   |

**Value** pre-selects an item when Type is **Radio**. Enter the value of the item to pre-select.

**Value Collection** pre-selects multiple items when Type is **Checkbox**.

**Size** controls the width of each picker item. Options: Small, Medium, Large, Responsive *(default — takes full width)*.

{% hint style="info" %}
Width can also be customized from the [Style Panel](/flow/component-builder/style-panel.md) under the Size section.
{% endhint %}

**Variant** controls the appearance of items when selected.

| Variant                       | What it looks like                                                 |
| ----------------------------- | ------------------------------------------------------------------ |
| **Non Coverable** *(default)* | A checkmark appears in the upper-right corner of the selected item |
| **Coverable**                 | The entire item is covered/highlighted when selected               |

<figure><img src="/files/scItXorTBOey7YdO5V1H" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Zhsw5RsELHExACKjBD3X" alt=""><figcaption></figcaption></figure>

**Required** prevents users from proceeding to the next screen without making a selection.

**Hide Check Mark** hides the check mark indicator when an item is selected.

**Disabled** grays out the picker and prevents user selection.

**Adding Sub-items:** You can nest sub-items within picker items for more complex hierarchies.

<figure><img src="/files/outMVhG6moDvvbt1KsJW" alt=""><figcaption></figcaption></figure>

You can find more information about [adding sub-items](/flow/tutorials/components/vertical-visual-picker/adding-sub-items.md) in the tips and tricks section.

### Advanced Options

**Min** sets the minimum number of items that must be selected. Only applies when **Type** is **Checkbox**. Defaults to 0.

**Max** sets the maximum number of items that can be selected. Only applies when **Type** is **Checkbox**.

> **Selection Range:** By setting Min and Max together you can precisely manage the number of options a user can select, ensuring adherence to your specified range.

<figure><img src="/files/wIXUoOkd5ZTS1smmCCZu" alt=""><figcaption></figcaption></figure>

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Vertical Visual Picker. Configure them from the **Interactions** tab of the Edit Vertical Visual Picker panel.

### Change

Fires when the user selects or deselects an item. Use this to store the selection in a flow variable or drive conditional logic downstream — the updated `selectedItem`, `selectedItems`, and `valueCollection` output attributes are available immediately after.

### Item Click

Fires when the user clicks an item, regardless of whether the selection changes. Use this to react to a click before the selection is confirmed — the `clickedItem` and `clickedItemValue` output attributes carry the details of the clicked item.

***

## Styling

The **Style** tab lets you fine-tune the appearance of the Vertical Visual Picker. Configure it from the **Style** tab of the Edit panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the picker.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the picker's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the picker's dimensions.

* **Width / Height:** Set fixed dimensions.
* **Overflow:** Control how content that exceeds the bounds is handled.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
  {% endtab %}

{% tab title="Label" %}
Styles the item label text.

* **Color:** Set the label text color.
* **Font Size / Font Style / Font Weight:** Control the label typography.
  {% endtab %}

{% tab title="Title" %}
Styles the item title text.

* **Color:** Set the title text color.
* **Font Size / Font Style / Font Weight:** Control the title typography.
* **Alignment:** Align the title text.
  {% endtab %}

{% tab title="Description" %}
Styles the item description text.

* **Color:** Set the description text color.
* **Font Size / Font Style / Font Weight:** Control the description typography.
* **Alignment:** Align the description text.
  {% endtab %}

{% tab title="Background" %}
Sets the item background across states.

* **Background Color / Background Color Hover / Background Color Selected:** Set the background for the default, hover, and selected states.
* **Background Color Sub Items:** Set the background for sub-items.
  {% endtab %}

{% tab title="Border" %}
Customizes the item border across states.

* **Color / Color Hover / Color Selected:** Set the border color for the default, hover, and selected states.
* **Size / Style / Radius:** Control the border thickness, line style, and corner roundness.
* **Shadow:** Apply a box shadow.
  {% endtab %}

{% tab title="Show More Button" %}
Styles the "Show More" button that reveals additional items.

* **Background Color / Background Color Active / Background Color Hover:** Set the button background across states.
* **Text Color / Text Color Active / Text Color Hover:** Set the button text color across states.
* **Border Color / Border Color Active / Border Color Hover:** Set the button border color across states.
* **Border Size / Border Radius:** Control the border thickness and corner roundness.
* **Block Start / Block End / Inline Start / Inline End:** Control the spacing around the button.
  {% endtab %}
  {% endtabs %}

You can find the instructions for styling [here](/flow/component-builder/style-panel.md).

***

## Output Variables

The Vertical Visual Picker exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Vertical Visual Picker component, and pick the output variable you need.

### Item Selection

Available after the user selects or deselects an item (fires on the **Change** interaction).

| Output variable      | Type                  | What it returns                             |
| -------------------- | --------------------- | ------------------------------------------- |
| **Selected Item**    | Record (SObject)      | The last item the user selected.            |
| **Selected Items**   | Collection of Records | All items currently selected.               |
| **Value Collection** | Text Collection       | The values of all currently selected items. |

> **Example:** After a user picks a service plan, store **Value Collection** in a flow variable and use it to filter a Get Records step on the next screen.

### Item Click

Available when the user clicks an item (fires on the **Item Click** interaction), regardless of whether the selection changes.

| Output variable        | Type             | What it returns                         |
| ---------------------- | ---------------- | --------------------------------------- |
| **Clicked Item**       | Record (SObject) | The item the user clicked.              |
| **Clicked Item Value** | Text (String)    | The value of the item the user clicked. |

### Others

| Output variable     | Type    | What it returns                                           |
| ------------------- | ------- | --------------------------------------------------------- |
| **Number of Items** | Integer | The total number of items currently loaded in the picker. |

### Flow Interaction Output Variables

Like all interactive Flow components, the Vertical Visual Picker exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/vertical-visual-picker.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.