Skip to main content


The "CheckBox" widget is used when the user should be selecting one or more options from a list of choices you offer. It is displayed as a box (or circle) that can be checked or unchecked to indicate the selection status.


Checkbox Properties

Sets the direction of display for the checkboxes.
Selected / Unselected
Switch between the properties associated with the Selected or Unselected options.
Icon With URL
Enables you to set an icon as the (un)selected checkboxes.
Icon URLEnter the URL of the icon here.
Select one of the available shapes for the checkboxes.
Border ColorSets the border color of the checkboxes.
Fill ColorSets the background color of the checkboxes.
Font SizeSets the size of the text.
Font WeightSets the thickness of the text.
ColorSets the color of the text.

Adding Data to the List

There are three ways to add "Data" to the Checkbox component, they are as follows:

  • Direct - Manually entering the data
  • Static - Hardcoding the data
  • Dynamic - Using API to source external-data

Direct Method

To add custom data directly to the checkbox list.

Step 01 Click on the data icon.


*It's the 2nd from left on the bottom-right of the screen

Step 02 Enter the desired display name in the "label" field and the corresponding bind name in the "value" field.


Step 03 Click the "Add" button.


The "onPreLoad" feature is available under the "Data" tab. [Make sure that the checkbox is your currently selected widget]

Step 01. Select the data icon.

Step 02 Click onPreoad to open the "Code Editor" window. (Note: Ensure that you have selected the 'Async' checkbox.)


Now, on the Code Editor screen, use the following script to add your custom data.

async function main(asset) {
// const option = { label: '', value: '' }
// const returnValue = [option, option]

// return array of options(s) to populate checkbox


You can also use the “onClick” feature of other widgets (such as buttons) to populate the checkbox list. Use the following script on the Code Editor screen of the widget to add your custom data.

async function main(asset) {
// const option = { label: '', value: '' }
// const data = [option, option]


API Methods


Adds the specified set of "Data" to the component.

setData(data: {label: string, value: string}[]): void


Sets the different "property" of the checkbox widget.

setProperties(data: {label: string, value: string}[]): void


Sets the ReadOnly flag for this component.

setReadOnly(readOnly: boolean): void


Sets the Visibility flag for this component.

setVisibility(visible: boolean): void


Sets the visibility condition for this component.

setVisibilityCondition(condition: string): void

Event Handlers


onChange - Triggers a specified action every time there's a change to the component's "value".