Checkbox and Radio

Pages UI
Search…
Pages UI
v5.0.1 - Pages Angular
Checkbox and Radio
​
Get rid of native look n' feel with our very own custom checkboxes written purely in CSS. These are retina compatible and available in all Bootstrap's contextual classes (ex: .primary)
Checkbox
1
<div class="form-check">
2
	<input type="checkbox" id="defaultCheck" checked>
3
	<label for="defaultCheck">
4
		Default checkbox
5
	</label>
6
</div>
7
<div class="form-check complete">
8
	<input type="checkbox" id="checkColorOpt1">
9
	<label for="checkColorOpt1">
10
		I agree to the terms and conditions
11
	</label>
12
</div>
13
<div class="form-check primary">
14
	<input type="checkbox" id="checkColorOpt2" checked>
15
	<label for="checkColorOpt2">
16
		Mark as read
17
	</label>
18
</div>
Copied!
Shape options
Bored with traditional boxed shape check boxes? Here is a circle one simply add the class .checkbox-circle to change it
1
<div class="form-check checkbox-circle danger">
2
	<input type="checkbox" id="checkcircleColorOpt1">
3
	<label for="checkcircleColorOpt1">
4
		Delete all personal settings
5
	</label>
6
</div>
7
<div class="form-check checkbox-circle complete">
8
	<input type="checkbox" id="checkcircleColorOpt2" checked>
9
	<label for="checkcircleColorOpt2">
10
		Keep me signed in
11
	</label>
12
</div>
Copied!
State options
These act the same way as normal HTML check boxes. Here are some states that
1
<div class="form-check form-check-inline complete">
2
	<input type="checkbox" id="checkboxIndeterminate">
3
	<label for="checkboxIndeterminate">
4
		Indeterminate
5
	</label>
6
</div>
7
<div class="form-check form-check-inline">
8
	<input type="checkbox" id="disableCheck" checked disabled>
9
	<label for="disableCheck">
10
		Disabled checkbox
11
	</label>
12
</div>
Copied!
Toggle controls
Do not delete the label element which is placed next to each radio. Leave it blank if you don't want it to hold any text
1
<div class="form-check">
2
	<input type="radio" name="texture" id="defaultradio" value="Default" checked>
3
	<label for="defaultradio">
4
		Default
5
	</label>
6
</div>
7
<div class="form-check complete">
8
	<input type="radio" name="texture" id="radio1" value="Medium">
9
	<label for="radio1">
10
		Medium textures
11
	</label>
12
</div>
13
<div class="form-check primary">
14
	<input type="radio" name="texture" id="radio2" value="Verbose">
15
	<label for="radio2">
16
		Verbose channel
17
	</label>
18
</div>
Copied!
State options
Use of different color opacity helps to distinguish between different states such as disable
1
<div class="form-check form-check-inline complete">
2
	<input type="radio" name="state" id="radioInline" value="Default" checked>
3
	<label for="radioInline">
4
		Default
5
	</label>
6
</div>
7
<div class="form-check form-check-inline">
8
	<input type="radio" name="state" id="radioDisabled" value="disabled" disabled>
9
	<label for="radioDisabled">
10
		Disabled
11
	</label>
12
</div>
Copied!
Bootstrap Components
Next - Forms
Form Group
Last modified 2yr ago
Copy link
Contents