-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
radio-buttons.html
125 lines (122 loc) · 3.89 KB
/
radio-buttons.html
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
<!DOCTYPE html>
<html lang="en">
<head>
{{> head }}
</head>
<body>
{{> navbar }}
<main>
{{> intro}}
<div class="container">
<div class="row">
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
<div id="radio" class="section scrollspy">
<p>
Radio Buttons are used when the user must make only one
selection out of a group of items. The
<code class="language-markup">for</code> attribute is necessary
to bind our custom radio button with the input. Add the input's
<code class="language-markup">id</code> as the value of the
<code class="language-markup">for</code> attribute of the label.
</p>
<p>
Add radio buttons to a group by adding the name attribute along
with the same corresponding value for each of the radio buttons
in the group. Create disabled radio buttons by adding the
disabled attribute as shown below.
</p>
<form action="#">
<p>
<label>
<input name="group1" type="radio" checked />
<span>Red</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>Yellow</span>
</label>
</p>
<p>
<label>
<input class="with-gap" name="group1" type="radio" />
<span>Green</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" disabled="disabled" />
<span>Brown</span>
</label>
</p>
</form>
<pre><code class="language-markup">
<form action="#">
<p>
<label>
<input name="group1" type="radio" checked />
<span>Red</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>Yellow</span>
</label>
</p>
<p>
<label>
<input class="with-gap" name="group1" type="radio" />
<span>Green</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" disabled="disabled" />
<span>Brown</span>
</label>
</p>
</form>
</code></pre>
</div>
<div id="gap" class="section scrollspy">
<h3 class="header">With Gap</h3>
<p>
To create a radio button with a gap, add
<code class="language-markup">class="with-gap"</code> to your
input. See the example below.
</p>
<p>
<label>
<input class="with-gap" name="group3" type="radio" checked />
<span>Red</span>
</label>
</p>
<pre><code class="language-markup">
<p>
<label>
<input class="with-gap" name="group3" type="radio" checked />
<span>Red</span>
</label>
</p>
</code></pre>
</div>
</div>
<div class="col hide-on-small-only m3 xl3">
<div class="toc-wrapper">
<div style="height: 1px;">
<ul class="section table-of-contents">
<li><a href="#radio">Radio Buttons</a></li>
<li><a href="#gap">With Gap</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
{{> footer }}
<script type="module" src="/src/main.ts"></script>
</body>
</html>