##

Demos

Menu Search

# Controlgroup

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

## Controlgroup vertical

No icon Left Right Top Bottom Icon only

### Mini sized

No icon Left Right Top Bottom Icon only

## Controlgroup horizontal

No icon Left Right
Top Top
Bottom Bottom
Icon only Icon only
More

## Mini sized

No icon Left Right
Top Top
Bottom Bottom
Icon only Icon only
More

## Radio button

Vertical:
One Two Three
Vertical, mini sized:
One Two Three
Horizontal:
One Two Three
Horizontal, mini sized:
One Two Three

## Checkbox

Vertical:
One Two Three
Vertical, mini sized:
One Two Three
Horizontal:
One Two Three
Horizontal, mini sized:
One Two Three

## Selects

Vertical:
Select A
Select B
Select C
Vertical, mini sized:
Select A
Select B
Select C
Horizontal:
Select A
Select B
Select C
Horizontal, mini sized:
Select A
Select B
Select C

## 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.

Value
Search

## 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:
Checkbox 1 Checkbox 2

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons

  - Icons
  - Grunticon loader

- ### Listview widget

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Listview Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation

  - Navigation
  - Linking pages
  - PHP redirect demo
  - Hash processing demo

- ### Pages

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Panel widget

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popup widget

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Tabs widget
- Textinput widget

- ### Theming

  - Default theme
  - Classic theme

- ### Toolbar widget

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons

  - Icons
  - Grunticon loader

- ### Listview widget

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Listview Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation

  - Navigation
  - Linking pages
  - PHP redirect demo
  - Hash processing demo

- ### Pages

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Panel widget

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popup widget

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Tabs widget
- Textinput widget

- ### Theming

  - Default theme
  - Classic theme

- ### Toolbar widget

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle