Technical Library

HTML5 Radio Button

The Radio Button UI element provides standard radio-button functionality. It has three states: off, on, and disabled. Radio Button UI elements are used in groups. Selecting one button in a group automatically turns off the group's other buttons. Only one member of the group can be on at a time.

Creation

For creating a group of radio buttons you shold create a fieldset with data-role:controlgroup. Then for each item, you'll need to add an input and a label as follows:

 <div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
</div>

The value for selected input will be submitted with the form as it happens in standard html syntax.

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>Radio Buttons</h2>
<!-- Sample radio buttons -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
</div>
</div>
</div>
</body>