Pages UI
Search…
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!