Comment on page
Vertical Visual Picker
Easily select from vertical options for clear, engaging decision-making.
The Vertical Visual Picker component enables users to select through an organized, vertical options display. This component enhances user experience by offering a clear, streamlined, engaging way to present choices. Ideal for various contexts, the Vertical Visual Picker simplifies decision-making.
The type attribute allows you to define how the input selection should behave. To enable users to select more than one option, use
You can access 4 different ratio values to decide the width of your vertical visual picker items. Visual picker items come in four sizes -
responsive(default as it takes all the width).
The Variant attribute lets you decide the appearance of an item when selected.
coverablevariant covers the whole item whereas
non coverableonly check the upper top right corner of the item.
Data Source will populate the data you want to add to your vertical visual picker component.
You have the choice between 3 differents types of Data Source
Enter vertical visual picker items manually.
Manualdata source is not connected to your flow collection, and items are not dynamic.
Add vertical visual picker items with values from one of your flow source collections. Adding a source collection lets you map your data with all the visual picker attributes.
Add vertical visual picker items with values coming from your picklist values fields. Select an object and a picklist field to add visual picker items based on picklist values.
Images can not be added to picklist values items.
Here are the available interactions for the Vertical visual picker component:
Change: The event fired when the slider value changed.
From the Styles panel, you can customize styling attributes for the vertical visual picker:
Header: to customize the styling settings of the label.
Title: to customize the styling settings of the title text.
Description: to customize the styling settings of the description text.
Background: to customize the styling settings of the item's background.
Border: to customize the styling settings of the item's border.
Last modified 2mo ago