Checkbox

API Documentation

Checkbox inputs are used to provide a list of options where more than one can be selected. Checkbox buttons are enhanced by the Checkboxradio widget.

Basic markup

To create a single checkbox, add an input with a type="checkbox" attribute and a corresponding label. If the input isn't wrapped in its corresponding label, be sure to set the for attribute of the label to match the id of the input so they are semantically associated.

Mini size

For a more compact version that is useful in toolbars and tight spaces, add the ui-mini class to the element's data-wrapper-class attribute to create a mini version.

Horizontal group

Checkboxes can be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To visually integrate multiple checkboxes into a 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 fieldset.

Horizontal:

Vertical group

To make a vertical button set, add data-direction="vertical" to the fieldset.

Vertical:

Theme

To set the theme, add the data-theme attribute to the fieldset or to the individual checkbox inputs.

Swatch B:

Disabled

Enhanced