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.

Quick Links

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.

Top

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.

Vertical:
Top

Horizontal group

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

Horizontal:
Top

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:
Top

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:
Top

Theme

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

Horizontal:
Top

Disabled

Top

Enhanced