Skip to main content

Select Bar

The Select Bar control is a unique interface designed to facilitate selection from a list of items arranged in a bar format. It offers a visually appealing and user-friendly way to present a range of selectable items.

Select Bar Control
Select Bar Control

Colored container indicates selection and if deselected the color is set back to the default. For example, a Select bar control can be used to let the user select all the required services by a customer.

Binding Data Options

The Select Bar control allows users to select one or more options from a list of choices. To populate the Select Bar control with data, you can use the Bind Data option, which accepts an array of strings in JSON format.

Binding Options Example

For example, if you want to create a Select Bar control with a list of items such as "Home," "Work," "Gym," and "Park," you can use the Bind Data option with an array of string values:


Selected Options - Data Binding

To set the default selected options in the Select Bar control, use the Bind Data - Selected Option section with an array of string value(s). For example:


Ensure the selected options match the values within the provided data to appear correctly in the Select Bar control.


The Select Bar control offers various properties to customize its appearance and functionality:

ThemeSet the color theme for the Select Bar.
Selection TypeChoose between single or multiple item selection.
Bar TypeDetermine how the items should be displayed.
Item WidthSet the width of each item as a percentage.
Bottom LabelConfigure the text for the bottom label.
Left TextConfigure the left text for the items.
Right TextConfigure the right text for the items.
Bottom TextCustomize the size, weight, and color for the bottom text.
Color ConfigurationDefine the color configuration for each options individually

Control Outputs

The outputs from the Select Bar control, represented by the placeholder {{select_bar}}, can be referenced in other controls, data queries, or JavaScript functions using the control's unique name.

select_barRepresents the user-selected values from the Select Bar control.


value_selectOccurs when there is a change in the value of the control, typically triggered by selecting another option or inputting a new value.