Skip to main content

Detail Select

The Detail Select Control is a versatile Selection control designed to showcase details such as Title, Subtitle, and additional text alongside the Select button. This feature enriches the user experience by presenting comprehensive information related to the selection choices.

Detail Select Control
Detail Select Control

Binding Data Options

The Detail Select Control offers the functionality to populate data such as Title, Subtitle, and additional information on the right side of the select button. This is achieved using the Bind Data option, which accepts an array of objects in JSON format.

Binding Options Example

For instance, if you want to create a Detail Select Control with items such as "Television" and "Bicycle" along with their descriptions and prices, you can use the Bind Data option with an array of objects, like this:

"name": "Television",
"description": "Electronic Device",
"price": 2000
"name": "Bicycle",
"description": "Mechanical Device",
"price": 1500

Selected Options - Data Binding

To set the default selected option in the Detail Select Control, you can use the Bind Data - Selected Option section with a single string value. For example:


Ensure the selected option matches a specific value within the provided data to appear correctly in the Detail Select Control.


The Detail Select Control comes with various properties to customize its appearance and functionality:

Flex controlEnables or disables control as a flexible layout.
Hide iconHides the icon for user selection.
Selection TypeAllows single or multiple item selection.
Title textAdjusts the size, weight, and color of the title text.
Subtitle textModifies the size, weight, and color of the subtitle text.
Right textCustomizes the size, weight, and color of the right text.


Text StyleCustomize the text style by changing the text size, weight (Light, Normal, Bold, Extra Bold, X Extra Bold), alignment (Left, Center, Right, Justified), and color of the label.
Background ColorThe background color of the selected option.
Border ColorThe color of the border for the selected option.
Radio ColorThe color of the radio or selection button.

Control Outputs

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

detail_selectRepresents the user-selected value from the Detail Select 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.