OOUI/Elements/Groups

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

SelectWidgets, which contain mutually exclusive options, are a commonly used example of a class that mixes in. , which are used when buttons are grouped logically, but are not mutually exclusive, are another example. 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  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  configuration option. For a full list of supported methods and configuration options, please see the code-level documentation for .



The  mixin class provides many methods that can be used to add, remove, or clear widgets from a group. For a full list of supported methods, please see the code-level documentation for .

Aggregate events
You can invoke a GroupElement's  method to tell it to listen to all its contained items for the event you specify, and in response   a new event. For example, the ToolGroup uses this to disable itself when all its contained items are disabled. Also, a draggable group element listens to its items' drag and drop events and emits a synthetic event to reorder its children.