Radio buttons

Radio inputs are used to provide a list of options where only a single option can be selected. Radio buttons are enhanced by the checkboxradio widget.

Basic markup

To create a set of radio buttons, add an input with a type="radio" attribute and a corresponding label. Set the for attribute of the label to match the id of the input so they are semantically associated.

Vertical group

To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a data-role="controlgroup" attribute on the container.


Horizontal group

To make a horizontal button set, add the data-type="horizontal" to the fieldset.


Mini size

For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the element to create a mini version.

Vertical, icon right, mini sized:

Icon position

To swap the position of the radio icon from the default position on the left, add the data-iconpos="right" attribute to the controlgroup.

Vertical, icon right:


To set the theme, add the data-theme attribute to the controlgroup or each of the individual checkbox inputs.