Control Group

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

This component has been DEPRECATED since Tizen 2.4 and will be deleted in Tizen 3.0.
To support Backward compatibility, please import

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>


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.