Radio buttons

Radio buttons

Radio buttons are used to provide a list of options where only a single item can be selected. Traditional desktop radio buttons are not optimized for touch input so in jQuery Mobile, we style the label for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide visual feedback.

To add a set of radiobuttons to your page, start with an select with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

	
<div data-role="fieldcontain">
	<label for="slider2">Select slider:</label>
	<select name="slider2" id="slider2" data-role="slider">
		<option value="off">Off</option>
			<option value="on">On</option>
		</select> 
</div>

A radiobutton list is displayed like this: