OOUI/Elements/Groups

Any OOjs UI widget that contains other widgets (buttons, options, input fields, tools, etc.) mixes in GroupElement. Adding, removing, and clearing items is done through the interface GroupElement provides.

Select widgets, which contain mutually exclusive options, are a commonly used example of a class that mixes in GroupElement. ButtonGroupWidgets, which are used when buttons are grouped logically, but are not mutually exclusive, are another example. StackLayouts, which we talk more about later, are yet another example.

All items in a group are addressed by a unique reference. If an item is added to a group that contains an item with the same reference, the existing item will be removed, and the new item will be added to the end of the array of items.

The following example illustrates a ButtonGroupWidget that contains two buttons. Note that the buttons are created, but not appended to the DOM. Instead, they are added to the button group using the widget’s items configuration option. For a full list of supported methods and configuration options, please see the code-level documentation for ButtonGroupWidget. The GroupElement class provides many methods that can be used to add, remove, or clear buttons from a group. For a full list of supported methods, please see the code-level documentation for GroupElement.