> 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/dynamic-components/components/vertical-visual-picker.md).

# Vertical Visual Picker

The Avonni Vertical Visual Picker displays a vertically stacked set of rich, card-style options that users can select as a radio (single choice) or checkbox (multiple choice) input. Use it when your options need more visual emphasis than standard radio buttons or checkboxes.

## Overview

To start, connect the component to your data and configure how items are displayed. The sections below follow the configuration panel from top to bottom.

## Configuration

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

### Data Source

Before building your picker, tell the component where to get the items it should display.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Manual</strong></td><td>Enter data directly into the component configuration.</td><td></td></tr><tr><td><strong>Variable</strong></td><td>This is useful for data that changes based on user interactions or other component logic.</td><td></td></tr><tr><td><strong>Query</strong></td><td>This is the most common option for displaying Salesforce records.</td><td></td></tr><tr><td><strong>Picklist</strong></td><td>Retrieve data dynamically from a standard or custom picklist field within Salesforce.</td><td><a href="/pages/NMTcHeq9UuKYUmBedI8t">/pages/NMTcHeq9UuKYUmBedI8t</a></td></tr></tbody></table>

### Data Mapping

When using a dynamic data source, configure the **Data Mappings** section to tell the component how to map your Salesforce data fields to the picker item properties (title, description, image, avatar, etc.).

### Content

#### Label

Add a text label to title the Vertical Visual Picker above the list of options.

#### Type

Defines the selection behavior of the picker. Set to **Radio** (default) to allow only one selection at a time, or **Checkbox** to allow multiple selections.

#### Value

The currently selected item value. Only available when **Type** is set to **Radio**. Requires: **Type** = **Radio**.

#### Value (multiple)

The currently selected item values as a list. Only available when **Type** is set to **Checkbox**. Requires: **Type** = **Checkbox**.

#### Size

Controls the width of each picker item. Options: **Small**, **Medium**, **Large**, and **Responsive** (default). Responsive adjusts the item width automatically based on the available space.

#### Variant

Changes the appearance of items when selected. **Non Coverable** (default) keeps the item content visible when selected. **Coverable** overlays a cover on the item when it is selected.

#### Required

If enabled, at least one item must be selected before the form can be submitted.

#### Hide Check Mark

If enabled, the check mark indicator is hidden when an item is selected.

#### Disabled

If enabled, the visual picker is disabled and users cannot interact with it.

#### Min

The minimum number of options that must be selected. Only applies when **Type** is set to **Checkbox**. Default is `0`. Requires: **Type** = **Checkbox**.

#### Max

The maximum number of options that can be selected. Only applies when **Type** is set to **Checkbox**. Requires: **Type** = **Checkbox**.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.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 react to the updated selection — the **selectedItem**, **selectedItems**, **value**, and **valueCollection** output variables are set and available to downstream flow logic.

### Item Click

Fires when the user clicks any item in the picker, regardless of whether the selection state changes. Use the **clickedItem** output variable to identify which item was clicked and drive navigation, record updates, or other flow logic.

## Output Variables

The Vertical Visual Picker exposes these output variables you can reference elsewhere on the page after the user interacts with it.

### Item Click

When a user clicks any item in the picker, these variables update with the clicked item's data.

| Output variable          | Type             | What it returns                                                                                                |
| ------------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------- |
| **Clicked Item**         | Object           | The item the user clicked — its value, title, description, image, and avatar properties.                       |
| **Clicked Item sObject** | Record (SObject) | The full Salesforce record associated with the clicked item. Requires a **Query** or **Variable** data source. |

> **Example:** When a user clicks a product card in the picker, use **Clicked Item sObject** to display the full product record details in a side panel.

### Item Selection

When a user selects or deselects an item, these variables update with the current selection.

| Output variable            | Type                           | What it returns                                                                                          |
| -------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------- |
| **Selected Item**          | Object                         | The last item the user selected — its value, title, description, image, and avatar properties.           |
| **Selected Items**         | Object                         | All currently selected items and their properties. Available when **Type** is set to **Checkbox**.       |
| **Selected Item sObject**  | Record (SObject)               | The full Salesforce record for the last selected item. Requires a **Query** or **Variable** data source. |
| **Selected Items sObject** | Record Collection (SObject\[]) | The Salesforce records for all selected items. Requires a **Query** or **Variable** data source.         |

> **Example:** When a user selects a service tier in a checkbox picker, use **Selected Items sObject** to pass all chosen records to a downstream record-update action.

### Others

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


---

# 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/dynamic-components/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.