Toggle buttons and radio buttons do not have any built-in intelligence to provide mutually exclusive behavior to a group of buttons. For that, you need a button group that imparts the semantics of mutual exclusivity to a group of buttons. A button group is represented by the buttonGroup element, whose selection attribute determines which button in the group is initially selected.

A button group is a logical construct, which does not take up any screen real estate, and is never added directly to a presentation component. A buttonGroup element is commonly described inside a reserve element, usually without an id attribute, because it is seldom referenced by another element.

Buttons, on the other hand, must be added to a presentation component if they are to manifest themselves in the user interface. Additionally, for the buttons to be considered part of a button group, they must be also be added to the button group.

To add the same button to both a button group and a presentation component, you must first describe a button in the usual manner. You must then describe an additional equivalent representation of the button using a reference element, which acts as a proxy for the original button element. Armed with two equivalent representations of the same object, you can put one inside the buttonGroup element, and the other inside the element representing the presentation component, as shown in the following example.

Make this object in eNode Sandbox. The result should be similar to the following:

A button group that contains radio buttons is described just like one that contains toggle buttons.

Make this object in eNode Sandbox. The result should be similar to the following: