HTML
xxxxxxxxxx1
<div class="container my-4">2
<p>3
<strong>You can allow a user to make multiple choices which is broadly used in forms and surveys See the4
examples.</strong>5
</p>6
7
<p>8
Detailed documentation and more examples you can find in our9
<a href="https://mdbootstrap.com/docs/standard/forms/checkbox/" target="_blank"><strong>Bootstrap Checkbox10
Docs</strong></a>11
</p>12
13
<hr />14
15
<p class="font-weight-bold">Basic example</p>16
17
18
<div class="border p-5">19
<!-- Copy this code to have a working example -->20
<div class="d-flex justify-content-center">21
<div>22
23
<div class="form-check">24
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />25
<label class="form-check-label" for="flexCheckDefault">26
Default checkbox27
</label>28
</div>29
30
<!-- Checked checkbox -->31
<div class="form-check">32
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked />33
<label class="form-check-label" for="flexCheckChecked">34
Checked checkbox35
</label>36
</div>37
</div>38
39
40
</div>41
<!--/ Copy this code to have a working example -->42
</div>43
44
<p class="font-weight-bold mt-3">Disabled checkbox</p>45
46
<p>47
Add the <code>disabled</code> attribute and the associated <code><label></code>s are48
automatically styled to match with a lighter color to help indicate the input’s state.49
</p>50
51
<div class="border p-5">52
<!-- Copy this code to have a working example -->53
<div class="d-flex justify-content-center">54
<div>55
56
<div class="form-check">57
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled />58
<label class="form-check-label" for="flexCheckDisabled"> Disabled checkbox </label>59
</div>60
61
<div class="form-check">62
<input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked63
disabled />64
<label class="form-check-label" for="flexCheckCheckedDisabled">65
Disabled checked checkbox66
</label>67
</div>68
</div>69
70
71
</div>72
<!--/ Copy this code to have a working example -->73
</div>74
75
76
<p class="font-weight-bold mt-3">Inline checkbox</p>77
78
<p>79
Group checkboxes or radios on the same horizontal row by adding80
<code>.form-check-inline</code> to any <code>.form-check</code>.81
</p>82
83
<div class="border p-5">84
<!-- Copy this code to have a working example -->85
<div class="d-flex justify-content-center">86
<div>87
88
<div class="form-check form-check-inline">89
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" />90
<label class="form-check-label" for="inlineCheckbox1">1</label>91
</div>92
93
<div class="form-check form-check-inline">94
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" />95
<label class="form-check-label" for="inlineCheckbox2">2</label>96
</div>97
98
<div class="form-check form-check-inline">99
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled />100
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>101
</div>102
</div>103
104
105
</div>106
<!--/ Copy this code to have a working example -->107
</div>108
109
<p class="font-weight-bold mt-3">Toggle buttons</p>110
111
<p>112
Group checkboxes or radios on the same horizontal row by adding113
<code>.form-check-inline</code> to any <code>.form-check</code>.114
</p>115
116
<div class="border p-5">117
<!-- Copy this code to have a working example -->118
<div class="d-flex justify-content-center">119
<div>120
121
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off" />122
<label class="btn btn-secondary" for="btn-check">Checkbox button</label>123
124
<input type="checkbox" class="btn-check" id="btn-check2" checked autocomplete="off" />125
<label class="btn btn-secondary" for="btn-check2">Checkbox button</label>126
127
<input type="checkbox" class="btn-check" id="btn-check3" autocomplete="off" />128
<label class="btn btn-secondary" for="btn-check3">Checkbox button</label>129
</div>130
131
132
</div>133
<!--/ Copy this code to have a working example -->134
</div>135
136
<p class="font-weight-bold mt-3"> Rounded toggle buttons with icons</p>137
138
<p>139
Group checkboxes or radios on the same horizontal row by adding140
<code>.form-check-inline</code> to any <code>.form-check</code>.141
<br>142
To get the effect of rounded buttons add <code>.btn-rounded</code>. to <code><label></code> class143
</p>144
145
<div class="border p-5">146
<!-- Copy this code to have a working example -->147
<div class="d-flex justify-content-center">148
<div>149
150
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off" />151
<label class="btn btn-success btn-rounded" for="btn-check">Checkbox button <i class="fas fa-user-plus"></i></label>152
153
<input type="checkbox" class="btn-check btn-success btn-rounded" id="btn-check2" checked autocomplete="off" />154
<label class="btn btn-success btn-rounded" for="btn-check2">Checkbox button <i class="far fa-gem"></i></label>155
156
<input type="checkbox" class="btn-check btn-success btn-rounded" id="btn-check3" autocomplete="off" />157
<label class="btn btn-success btn-rounded" for="btn-check3">Checkbox button <i class="fab fa-github-square"></i></label>158
</div>159
160
161
</div>162
<!--/ Copy this code to have a working example -->163
</div>164
</div>CSS
1
1
JS
1
1
Console errors: 0