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.
Manual
Enter data directly into the component configuration.
Variable
This is useful for data that changes based on user interactions or other component logic.
Query
This is the most common option for displaying Salesforce records.
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.
Interactions
Interactions 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.
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.
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
Number of Items
Number
The total number of items currently loaded in the picker.
Last updated
Was this helpful?