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 |
|---|---|
The coverable variant type refers to the appearance of an item when it is selected. When used, it covers the whole item. | |
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
| 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 |
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[] |
Last updated
