Radio Button Group

Radio Button Group creates a set of radio buttons that can be derived from a specified selection list or provided by a selection service. From the specified selection list, only one item can be selected at a time.

The Radio Button Group control provides an alternative to the Single Select control for selecting a single item from a list of available item.

Data binding

Set or modify the data binding for the Radio Button Group control in the General properties tab. The control can be bound to any simple data type (for example String, Boolean, Integer, Decmimal). The binding is updated with the value of the selection.

Configuration properties

Set or modify configuration properties for the Radio Button Group control, such as appearance and items properties, in the Configuration properties tab.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor (deprecated), you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for the Radio Button Group control are listed in the following table:

Table 1. Appearance configuration properties for Radio Button Group
Appearance configuration property	Description	Data type
Width	The width of the control. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed.	`String`
Label placement	The position of the control label. The available options are `Left` and `Right`. Note that a left placement of the label changes the specified width of the control.	`String`
Label width	The width of the label. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed.	`String`

The items configuration properties for the Radio Button Group control are listed in the following table:

Table 2. Items configuration properties for Radio Button Group
Items configuration property	Description	Data type
Item lookup mode	The method used to populate the list of items that the user can select from. Note: Make sure the correct option is selected, otherwise the list will not be populated correctly. Start Empty Programmatically populate the selection list using the `appendItem(value, displayText)` method. Items From Service The selection list is populated from a service that you specify in the List items service option. Items From Static List The selection list is populated by properties that you enter in the Static list option. Items From Config Option The selection list is populated from a business object list that you specify in the Item input data option.	`String`
List items service	The service used to populate the list of items that appear in the selection list. The service is used when the Item lookup mode is Items From Service. The service is a service flow with appropriate Ajax access that provides the selection list based on the data provided by the Service input data business object. You can use this option as an alternative to binding the control to a list object.	`Ajax Service`
Service input data	A business object that provides the input data that is passed to the service flow that populates the selection list. This option is used when the Item lookup mode is Items From Service.	`ANY`
Item input data	A business object list that populates the selection list. This property is used only if the Item lookup mode is Items From Config Option..	`ANY[]`
Item selection data	In the Display property field, set the business object property to display in the selection list. If no values are specified for the data mapping properties, the default values are `name` for Value property, and `value` for Display property.	`String` Option value property: `String` Option display property: `String`
Static list	.A static list of items to populate the selection list. Use this option only for a static list. Do not specify a variable for this option. For a variable list, use the Items From Config Option lookup mode.	`NameValuePair[]`

Example

To add a group of radio buttons for age range selection to your coach, add a Radio Button Group control to the coach layout, and then set its configuration options as shown in the following example:

Under General, specify a label for your radio button group, for example, Age range:.
Under Items:
- Set Item lookup mode to Items From Static List.
- Expand Static list, and then use the plus (+) buttons to add the following name and value pairs to the list:
  Name Value
  
  25 25 and under
  
  40 40 and under
  
  64 64 and under
  
  65 Over 65
- Under Appearance, set Width to 200px, and Label placement to Top.
- Save your changes.

Name	Value
25	25 and under
40	40 and under
64	64 and under
65	Over 65

When the coach runs, the resulting radio button group lists the following options from which you can choose:

25 and under
40 and under
64 and under
Over 65

Events

Set or modify the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information about how to define and code events, see User-defined events.

On load: Activated when the page loads. For example:
```
console.log(me.getItemCount())
```
On service items: Activated when the service flow returns the items list. It gets activated when Item lookup Mode is set to Items From Service. For example:
```
console.log("RadioButtonGroup1 item service retrieved items successfully")
```
On service error: Activated when the selection service returns an error. It gets activated when Item Lookup Mode is set to Items From Service. For example:
```
me.clearItems()
```
On change: Activated when the bound data changes, such as when a radio button is selected. For example:
```
${RadioButtonGroup2}.reloadServiceItems(me.getSelectedIndices())
```

Methods

For detailed information on the available methods for Radio Button Group, see the Radio Button Group JavaScript API.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.