1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Radio Buttons</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../../../js/jquery.js"></script>
<script src="../../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../../js/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Radio buttons</h1>
<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form action="#" method="get">
<h2>Radio buttons</h2>
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
<p>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 jQuery Mobile styles the <code>label</code> for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
<p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to radio buttons.</p>
<h2>Vertically grouped radio buttons</h2>
<p>To create a set of radio buttons, add an <code>input</code> with a <code>type="radio"</code> attribute and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated.</p>
<p>The <code>label</code> element is displayed next to the radio form element. Wrap the radio buttons in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question.</p>
<p>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 <code> data-role="controlgroup"</code> attribute on the container.</p>
<pre><code>
<strong><fieldset data-role="controlgroup">
<legend>Choose a pet:</legend></strong>
<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>
<strong></fieldset></strong>
</code></pre>
<p>This will produce a vertically grouped radio button set. The default styles set the width of the button group to 100% of the parent container and stacks the label on a separate line.</p>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-pet-1a" id="radio-pet-1a" value="choice-1" checked="checked" />
<label for="radio-pet-1a">Cat</label>
<input type="radio" name="radio-pet-1a" id="radio-pet-2a" value="choice-2" />
<label for="radio-pet-2a">Dog</label>
<input type="radio" name="radio-pet-1a" id="radio-pet-3a" value="choice-3" />
<label for="radio-pet-3a">Hamster</label>
<input type="radio" name="radio-pet-1a" id="radio-pet-4a" value="choice-4" />
<label for="radio-pet-4a">Lizard</label>
</fieldset>
<h2>Mini version</h2>
<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
<pre><code>
<fieldset data-role="controlgroup" <strong>data-mini="true"</strong>>
<input type="radio" name="radio-choice-1" id="radio-mini-1" value="choice-1" checked="checked" />
<label for="radio-mini-1">Credit</label>
<input type="radio" name="radio-choice-1" id="radio-mini-2" value="choice-2" />
<label for="radio-mini-2">Debit</label>
<input type="radio" name="radio-choice-1" id="radio-mini-3" value="choice-3" />
<label for="radio-mini-3">Cash</label>
</fieldset>
</code></pre>
<p>This will produce a radio button that is not as tall as the standard version and has a smaller text size.</p>
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" name="radio-choice-1" id="radio-mini-1" value="choice-1" checked="checked" />
<label for="radio-mini-1">Credit</label>
<input type="radio" name="radio-choice-1" id="radio-mini-2" value="choice-2" />
<label for="radio-mini-2">Debit</label>
<input type="radio" name="radio-choice-1" id="radio-mini-3" value="choice-3" />
<label for="radio-mini-3">Cash</label>
</fieldset>
<h2>Field containers</h2>
<p>Optionally wrap the radiobuttons in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
<pre><code>
<strong><div data-role="fieldcontain">
</strong> <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>
<strong></div>
</strong> </code></pre>
<p>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 <code> data-role="controlgroup"</code> attribute on the container.</p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-pet-1" id="radio-pet-1" value="choice-1" checked="checked" />
<label for="radio-pet-1">Cat</label>
<input type="radio" name="radio-pet-1" id="radio-pet-2" value="choice-2" />
<label for="radio-pet-2">Dog</label>
<input type="radio" name="radio-pet-1" id="radio-pet-3" value="choice-3" />
<label for="radio-pet-3">Hamster</label>
<input type="radio" name="radio-pet-1" id="radio-pet-4" value="choice-4" />
<label for="radio-pet-4">Lizard</label>
</fieldset>
</div>
<h2>Horizontal radio button sets</h2>
<p>Radio buttons can also be used for grouped button sets where only a single button can be selected at once, such as a view switcher control. To make a horizontal radio button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
<code>
<fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong> >
</code>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Layout view:</legend>
<input type="radio" name="radio-view" id="radio-view-a" value="list" />
<label for="radio-view-a">List</label>
<input type="radio" name="radio-view" id="radio-view-b" value="grid" />
<label for="radio-view-b">Grid</label>
<input type="radio" name="radio-view" id="radio-view-c" value="gallery" />
<label for="radio-view-c">Gallery</label>
</fieldset>
</div>
<p>The labels float so they sit side-by-side on a line. The radio button icons are hidden and only the left and right edges of the group are rounded.</p>
</form>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Form elements</li>
<li><a href="../docs-forms.html">Form basics</a></li>
<li><a href="../forms-all.html">Form element gallery</a></li>
<li><a href="../textinputs/index.html">Text inputs</a></li>
<li><a href="../search/">Search input</a></li>
<li><a href="../slider/">Slider</a></li>
<li><a href="../switch/">Flip toggle switch</a></li>
<li data-theme="a"><a href="index.html">Radio buttons</a></li>
<li><a href="../checkboxes/">Checkboxes</a></li>
<li><a href="../selects/">Select menus</a></li>
<li><a href="../forms-themes.html">Theming forms</a></li>
<li><a href="../forms-all-native.html">Native form elements</a></li>
<li><a href="../forms-sample.html">Submitting forms</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>© 2011-12 The jQuery Foundation</p>
</div>
</div><!-- /page -->
</body>
</html>
|
