Technical Library

HTML5 Checkboxes

The Checkbox UI element enables users to choose among a number of possibilities in an application. There are two kinds of check boxes: normal (in which a check mark can be set or cleared) and mixed (in which an en-dash can be set or cleared). The mixed check boxes might be used at the top of a list, to show that only some of the subcategories have been selected, or in other situations in which a simple "off/on" state is not appropriate. A normal or mixed check box can have three states: off, on (checked), and disabled.

Normal and mixed Checkbox UI elements look like this in an application:

Creation of normal checkboxes

For creating a group of normal checkboxes you should add a fieldset with data-role:controlgroup. Then for each checkbox to be added, you'll need to include an input and a label as follows:

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Your Vehicles:</legend>
<input id="checkbox-1" class="custom" type="checkbox" name="checkbox-1" />
<label for="checkbox-1">Car</label>
<input id="checkbox-2" class="custom" type="checkbox" name="checkbox-2" />
<label for="checkbox-2">Bike</label>
<input id="checkbox-3" class="custom" type="checkbox" name="checkbox-3" />
<label for="checkbox-3">Skate</label>
</fieldset>
</div>

The behavior of the checkboxes is the same as the standard html UI elements.

Creation of mixed checkboxes

The only difference in the implementation is that we will need to add the class="checkbox-alt" to transform this checkbox to a mixed one.

<input id="checkbox-4" class="custom" type="checkbox" name="checkbox-4" />
<label class="checkbox-alt" for="checkbox-4">Car</label>

Full code

<body>
<div data-role="page" data-theme="b">
<div data-role="header" class="ui-bar-a ui-header" role="banner">
<a id="backButton" href="/index.html" data-icon="arrow-l" data-theme="a">Back</a>
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Form Elements</h1>
</div>
<div data-role="content">
<h2>Checkboxes</h2>
<!-- This is a standard checkbox example -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Your Vehicles:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">Car</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">Bike</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" />
<label for="checkbox-3">Skate</label>
</fieldset>
</div>
<!-- This is a dash-checkbox example -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Your Vehicles:</legend>
<input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" />
<label for="checkbox-4" class="checkbox-alt">Car</label>
<input type="checkbox" name="checkbox-5" id="checkbox-5" class="custom" />
<label for="checkbox-5" class="checkbox-alt">Bike</label>
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
<label for="checkbox-6" class="checkbox-alt">Skate</label>
</fieldset>
</div>
</div>
</div>
</body>