Skip to main content

Checkbox Group (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Checkbox Group widget shows a list of checkboxes under one label. Users can check any number of them. Use it for a short list of options where users may pick more than one, for example notification channels.

Checkbox Group widget in a Responsive app
Checkbox Group widget

Widget type: WDS_CHECKBOX_GROUP_WIDGET

Content properties​

These properties appear in the Content tab of the property pane.

Data​

Options array<object>​

Sets the checkboxes. Each option has a label and a value. Values must be unique. You can add options in the property pane or switch to JS to bind an array.

Default value:

[
  { "label": "Blue", "value": "BLUE" },
  { "label": "Green", "value": "GREEN" },
  { "label": "Red", "value": "RED" }
]

Default selected values array<string>​

Sets the options that are checked when the widget loads. Enter an array of values, or a comma-separated string. Default: ["BLUE", "RED"].

Example:

["GREEN"]

Orientation string​

Sets how the checkboxes are laid out. Options:

  • Horizontal: in a row.
  • Vertical: in a column.

Default: Vertical.

Label​

Text string​

Sets the label shown above the group. Default: Color.

Tooltip string​

Shows help text or details next to the label.

Validations​

Required boolean​

Makes checking at least one option mandatory. When on and no option is checked, the widget is invalid and shows the message "Please select an option" after the user interacts with it. Default: off.

General​

Visible boolean​

Controls whether the widget is visible when the app runs. Default: on.

Disabled boolean​

Stops users from changing the checked options. Default: off.

Animate loading boolean​

Shows a loading animation while the widget's data loads. Default: on.

Select all options boolean​

Shows a "Select all" checkbox before the options. When no option is checked, clicking it checks all options. When some or all options are checked, clicking it clears them all. Default: off.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{CheckboxGroup1.isVisible}}. You cannot set them directly.

isVisible boolean​

Shows whether the widget is visible.

Example:

{{CheckboxGroup1.isVisible}}

isDisabled boolean​

Shows whether the widget is disabled.

Example:

{{CheckboxGroup1.isDisabled}}

isValid boolean​

Shows whether the widget is valid. It is false only when Required is on and no option is checked.

Example:

{{CheckboxGroup1.isValid}}

options array<object>​

Holds the options set in Options.

Example:

{{CheckboxGroup1.options}}

selectedValues array<string>​

Holds the values of the checked options.

Example:

{{CheckboxGroup1.selectedValues}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

CheckboxGroup1.setVisibility(true)

setDisabled (param: boolean): Promise​

Turns the disabled state on or off.

Example:

CheckboxGroup1.setDisabled(false)

setRequired (param: boolean): Promise​

Turns the Required setting on or off.

Example:

CheckboxGroup1.setRequired(true)

setSelectedOptions (param: array): Promise​

Sets the checked options by their values.

Example:

CheckboxGroup1.setSelectedOptions(["GREEN", "RED"])

Events​

onCheckChange​

Runs when the user checks or clears an option, including through Select all.