Links

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 multiple options, use buttons checkboxes instead of radio buttons.

Selection Range Customization

The Vertical Visual Picker components now include a 'Selection Range Customization' feature, enhancing your control over item selection. This feature allows you to define minimum and maximum selection limits, which is particularly useful when utilizing the Checkbox Type.
By setting these parameters, you can precisely manage the number of options a user can select, ensuring adherence to your specified range and enhancing the accuracy of data collection or user input.

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.

Specifications

Attributes
Events
Styling Hooks
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

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
Last modified 23d ago