Skip to main content

Radio 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 Radio Group widget shows a list of radio buttons under one label. Users pick exactly one option. Use it for a short list where all choices should stay visible, for example a shirt size.

Radio Group widget in a Responsive app
Radio Group widget

Widget type: WDS_RADIO_GROUP_WIDGET

Content properties​

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

Data​

Options array<object>​

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

Default value:

[
  { "label": "Small", "value": "S" },
  { "label": "Medium", "value": "M" },
  { "label": "Large", "value": "L" }
]

Default selected value string​

Sets the option that is selected when the widget loads. Enter the option's value. To use a number value, write it in {{ }}, for example {{1}}. Default: L.

Orientation string​

Sets how the radio buttons 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: Size.

Tooltip string​

Shows help text or details next to the label.

Validations​

Required boolean​

Makes a selection mandatory. When on and no option is selected, the widget shows the message "Please select an option." Default: off.

General​

Visible boolean​

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

Disabled boolean​

Stops users from changing the selection. Default: off.

Animate loading boolean​

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

Reference properties​

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

isVisible boolean​

Shows whether the widget is visible.

Example:

{{RadioGroup1.isVisible}}

options array<object>​

Holds the options set in Options.

Example:

{{RadioGroup1.options}}

selectedOptionValue string​

Holds the value of the selected option. If the options use number values, it holds a number.

Example:

{{RadioGroup1.selectedOptionValue}}

isRequired boolean​

Shows whether Required is on.

Example:

{{RadioGroup1.isRequired}}

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:

RadioGroup1.setVisibility(true)

setDisabled (param: boolean): Promise​

Turns the disabled state on or off.

Example:

RadioGroup1.setDisabled(false)

setData (param: array): Promise​

Sets the options.

Example:

RadioGroup1.setData([{ label: "Yes", value: "Y" }, { label: "No", value: "N" }])

Events​

onSelectionChange​

Runs when the user selects a different option.