Comment on page

Vertical Visual Picker

Easily select from vertical options for clear, engaging decision-making.

📘 Overview
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.
Changing the Properties
Selecting a type
The type attribute allows you to define how the input selection should behave. To enable users to select more than one option, use checkboxes instead of radio buttons. 
Setting a Size
You can access 4 different ratio values to decide the width of your vertical visual picker items. Visual picker items come in four sizes - small, medium, large and responsive (default as it takes all the width).
Width value can be customized from the Style Panel under the size section.
Choosing a Variant
The Variant attribute lets you decide the appearance of an item when selected.
The coverable variant covers the whole item whereas non coverable only check the upper top right corner of the item.
Variant Type
Image
Coverable
​
The coverable variant type refers to the appearance of an item when it is selected. When used, it covers the whole item.
​
​
Non Coverable
​
The non-coverable variant only checks the upper top right corner of the item when selected.
​
​
Adding a Data Source
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
Manual
Enter vertical visual picker items manually. Manual data source is not connected to your flow collection, and items are not dynamic. 
Variable
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. 
Picklist Values
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.
Adding Sub-items
You can find more information about adding sub-items in the tips and tricks section.
Adding Interactions
Interactions define what will happen when users interact with the Vertical visual picker component. You can find a list of interactions available here.
Here are the available interactions for the Vertical visual picker component:
On Change: The event fired when the slider value changed.
Styling the Vertical Visual Picker
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.
You can find the instructions for styling here.
Examples
Property
Value
Label
Select a product
Type
Radio
Size
XX-Large
Ratio
1-by-1
Variant
Not Coverable
Required 
Yes
Data Source
Manual
Items / Title
Appointment Analytics
Items / Description
Bring the power of Tableau CRM to Lightning Scheduler...
Items / Value
appointmentAnalytics
Image Source
Upload your own image
Items / Title Position
Center
Items / Description position
Center
Items / Avatar Position
Left
Items / Avatar Variant
Square
Items / Avatar Icon name
standard:service_appointment
Items / Avatar Size
Medium
Items / Presence Position 
Top Right
Tags / Label
Lightning
Tags / Variant
Base
Specifications
Attributes
Name
Type
Description
disabled
Boolean
If present, the visual picker is disabled and the user cannot interact with it.
hideCheckMark
Boolean
If present, hide the check mark when selected.
label
String
Text label to title the vertical visual picker.
required
Boolean
If present, at least one item must be selected.
size
String
It defines the width of the item. Valid values include small, medium, large and responsive.
type
String
It defines the type of input. Valid values include radio and checkbox.
value
String
Value of the selected item. For the checkbox type, the value can be an array. Ex: [value1, value2], 'value1' or ['value1'].
variant
String
It changes the appearance of the item when selected. Valid values include coverable and non-coverable.
items
VerticalVisualPickerItem[]
​
Events
Name
Description
change
The event fired when the value changed.
Styling Hooks
Header
Name
Description
Text Color
Define a text color for the header if a label is present
Font Size
Define a font style for the header if a label is present
Font Style
Define a font style for the header if a label is present
Font Weight
Define a font weight for the header if a label is present
Title
Name
Description
Text Color
Define a text color setting for the title
Alignment
Define an alignment  setting for the title
Font Size
Define a font size setting for the title
Font Style
Define a font style setting for the title
Font Weight
Define a font weight setting for the title
Description
Name
Description
Text Color
Define a text color setting for the description
Font Size
Define a text color setting for the description
Font Style
Define a text color setting for the description
Font Weight
Define a text color setting for the description
Background
Name
Description
Background Color
Define a background color for items 
Background Color Hover
Define a background color hover for items 
Background Color Selected
Define a background color selected for items 
Border
Name
Description
Border Size
Define a border size for items
Border Radius
Define a border radius for items
Border Color
Define a border color for items
Border Color Hover
Define a border color hover for items
Border Color Selected
Define a border color selected for items
Border Style
Define a border style for items
Shadow
Define a border shadow for items

Variant Type	Image
`Coverable` The coverable variant type refers to the appearance of an item when it is selected. When used, it covers the whole item.
`Non Coverable` The non-coverable variant only checks the upper top right corner of the item when selected.

Property	Value
Label	Select a product
Type	Radio
Size	XX-Large
Ratio	1-by-1
Variant	Not Coverable
Required	Yes
Data Source	Manual
Items / Title	Appointment Analytics
Items / Description	Bring the power of Tableau CRM to Lightning Scheduler...
Items / Value	appointmentAnalytics
Image Source	Upload your own image
Items / Title Position	Center
Items / Description position	Center
Items / Avatar Position	Left
Items / Avatar Variant	Square
Items / Avatar Icon name	standard:service_appointment
Items / Avatar Size	Medium
Items / Presence Position	Top Right
Tags / Label	Lightning
Tags / Variant	Base

Name	Type	Description
disabled	Boolean	If present, the visual picker is disabled and the user cannot interact with it.
hideCheckMark	Boolean	If present, hide the check mark when selected.
label	String	Text label to title the vertical visual picker.
required	Boolean	If present, at least one item must be selected.
size	String	It defines the width of the item. Valid values include `small`, `medium`, `large` and `responsive`.
type	String	It defines the type of input. Valid values include radio and checkbox.
value	String	Value of the selected item. For the checkbox type, the value can be an array. Ex: [value1, value2], 'value1' or ['value1'].
variant	String	It changes the appearance of the item when selected. Valid values include coverable and non-coverable.
items	VerticalVisualPickerItem[]

Name	Description
change	The event fired when the value changed.

Name	Description
Text Color	Define a text color for the header if a label is present
Font Size	Define a font style for the header if a label is present
Font Style	Define a font style for the header if a label is present
Font Weight	Define a font weight for the header if a label is present

Name	Description
Text Color	Define a text color setting for the title
Alignment	Define an alignment setting for the title
Font Size	Define a font size setting for the title
Font Style	Define a font style setting for the title
Font Weight	Define a font weight setting for the title

Name	Description
Text Color	Define a text color setting for the description
Font Size	Define a text color setting for the description
Font Style	Define a text color setting for the description
Font Weight	Define a text color setting for the description

Name	Description
Background Color	Define a background color for items
Background Color Hover	Define a background color hover for items
Background Color Selected	Define a background color selected for items

Name	Description
Border Size	Define a border size for items
Border Radius	Define a border radius for items
Border Color	Define a border color for items
Border Color Hover	Define a border color hover for items
Border Color Selected	Define a border color selected for items
Border Style	Define a border style for items
Shadow	Define a border shadow for items

Last modified 2mo ago