Vertical Visual Picker
The Avonni Vertical Picker offers a clear, organized vertical layout for selecting options.
Overview
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 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.
Properties
Label sets the label displayed above the picker.
Type defines the selection behavior.
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).
Variant controls the appearance of items when selected.
Non Coverable (default)
A checkmark appears in the upper-right corner of the selected item
Coverable
The entire item is covered/highlighted when selected
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.
You can find more information about adding sub-items 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.
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 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.
Controls the outer spacing around the picker.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the picker's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
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.
Adjusts display when opened as a modal dialog inside a Flow screen.
Width: Dialog width.
Height: Dialog height.
Background Color: Dialog background color.
Styles the item label text.
Color: Set the label text color.
Font Size / Font Style / Font Weight: Control the label typography.
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.
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.
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.
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.
You can find the instructions for styling here.
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).
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.
Clicked Item
Record (SObject)
The item the user clicked.
Clicked Item Value
Text (String)
The value of the item the user clicked.
Others
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 or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?