Controlgroup

Controlgroups are used to visually group a set of buttons to form a single block that looks contained like a navigation component.

Quick Links

Controlgroup vertical

No icon Left Right Top Bottom Icon only

Mini sized

No icon Left Right Top Bottom Icon only
Top

Controlgroup horizontal

No icon Left Right
Top Top
Bottom Bottom
Icon only Icon only
Select…
Top

Mini sized

No icon Left Right
Top Top
Bottom Bottom
Icon only Icon only
Select…
Top

Radio button

Vertical:
Vertical, mini sized:
Horizontal:
Horizontal, mini sized:
Top

Checkbox

Vertical:
Vertical, mini sized:
Horizontal:
Horizontal, mini sized:
Top

Selects

Vertical:
One
One
One
Vertical, mini sized:
One
One
One
Horizontal:
One
One
One
Horizontal, mini sized:
One
One
One
Top

Textinputs

While textinputs are not officially supported by the controlgroup they can be made to work with some simple css.

To make this work you will need to add one css rule and use textinput's wrapperClass option to set two classes on the textinput wrapper.

$
Top

Pre-rendered markup

You can supply pre-rendered markup for any controlgroup to save startup time. The example below illustrates the markup you have to provide for a pre-rendered controlgroup. Note that the widgets inside the controlgroup need not necessarily be pre-rendered.

Pre-rendered controlgroup: