Control Group

The control group component improves the styling of multiple buttons by grouping them into a single block.

Since: 2.3

Table of Contents

  1. Default Selectors
  2. HTML Examples
  3. Options

Default Selectors

By default, all <div> elements with the data-role="controlgroup" attribute are displayed as control groups.

HTML Examples

To create a control group, use the following code:

<div data-role="controlgroup">
   <a href="#" data-role="button">Yes</a>
   <a href="#" data-role="button">No</a>
   <a href="#" data-role="button">Cancel</a>
</div>

Options

The following table lists the options for the control group component.

Option Input type Default value Description
data-type "vertical" | "horizontal" "vertical" Direction of the control group.
data-excludeInvisible true | false false Flag specifying exclusion of invisible elements.