Pages UI
Search…
Checkboxes 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!
Last modified 1yr ago