Radio Button Group

The Radio Button Group control is used to create a list of items where only one option can be selected at a time. The Radio Button Group list items can be populated statically (hard-coded) or retrieved through a service. This control provides an alternative to the Single Select control for selecting a single item from a list using the familiar “radio button” paradigm.

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).


Item Lookup Mode : Start Empty, Items From Service, Items From Static List, Items From Config Option.  One of these items must be selected. Depending which option was selected, the user must configure the correct respective options (List Items Service, Service Input Data, or Static List) otherwise the control will not populate.

List Items Service : AJAX service to populate item selection list

Service Input Data : Data to be passed to the AJAX service that populates the select list items

Item List : Bound list of items to populate selection. Specify the variable which contains the list used to populate the control

Data Mapping : Set which property to take as the selection value, and which to display in the selection. If unset, display will default to "value" property, and value will default to "name" property

Static List : Static list of items to populate selection. Note: "value" is used as the display property


Width :  Width in px, %, em; for example: 50px, 20%, 0.4em, if no unit is specified, px is assumed

Label Placement : Where to place the label; Note: Labels on the left will change the specified width of the control

Example of configuration option settings :

Results : 


With the radio button group control, there are 4 types of event handlers:

  • On Load : When the page loads
  • On Service Items : When there is an item service return
  • On Service Error : When there is a service error
  • On Change : When there is a change in selection

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.


For detailed information on the available methods for this control, access the JS Doc file.

Was this article helpful?
0 out of 0 found this helpful