Checkboxes and Radio

PS
Last updated 2 months ago

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: .check-primary)

Checkbox

<div class="checkbox check-default">
<input type="checkbox" checked="checked" value="1" id="checkbox1">
<label for="checkbox1">Keep Me Signed in</label>
</div>
<div class="checkbox check-success ">
<input type="checkbox" checked="checked" value="1" id="checkbox2">
<label for="checkbox2">I agree</label>
</div>
<div class="checkbox check-primary">
<input type="checkbox" checked="checked" value="1" id="checkbox3">
<label for="checkbox3">Mark</label>
</div>
<div class="checkbox check-info">
<input type="checkbox" checked="checked" value="1" id="checkbox4">
<label for="checkbox4">Steve Jobs</label>
</div>
<div class="checkbox check-warning">
<input type="checkbox" checked="checked" value="1" id="checkbox5">
<label for="checkbox5">Action</label>
</div>
<div class="checkbox check-danger">
<input type="checkbox" checked="checked" value="1" id="checkbox6">
<label for="checkbox6">Mark as read</label>
</div>

Shape options

Bored with traditional boxed shape check boxes? Here is a circle one simply add the class .checkbox-circle to change it

<div class="checkbox check-default checkbox-circle">
<input type="checkbox" checked="checked" value="1" id="checkbox7">
<label for="checkbox7">Keep Me Signed in</label>
</div>
<div class="checkbox check-success checkbox-circle">
<input type="checkbox" checked="checked" value="1" id="checkbox8">
<label for="checkbox8">I agree</label>
</div>
<div class="checkbox check-primary checkbox-circle">
<input type="checkbox" checked="checked" value="1" id="checkbox9">
<label for="checkbox9">Mark</label>
</div>

State options

These act the same way as normal HTML check boxes. Here are some states that

<div class="checkbox check-success">
<input type="checkbox" disabled="disabled" value="check1" name="check" id="check1">
<label for="check1">Checkbox No. 1</label>
</div>
<div class="checkbox check-success">
<input type="checkbox" disabled="disabled" checked="checked" value="check2" name="check" id="check2">
<label for="check2">Checkbox No. 2</label>
</div>

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

<div class="radio radio-default">
<input type="radio" checked="checked" value="yes" name="radio1" id="radio1Yes">
<label for="radio1Yes">Agree</label>
<input type="radio" value="no" name="radio1" id="radio1No">
<label for="radio1No">Disagree</label>
</div>
<div class="radio radio-success">
<input type="radio" checked="checked" value="yes" name="radio2" id="radio2Yes">
<label for="radio2Yes">Male</label>
<input type="radio" value="no" name="radio2" id="radio2No">
<label for="radio2No">Female</label>
</div>
<div class="radio radio-primary">
<input type="radio" checked="checked" value="yes" name="radio3" id="radio3Yes">
<label for="radio3Yes">High</label>
<input type="radio" value="no" name="radio3" id="radio3No">
<label for="radio3No">Low</label>
</div>
<div class="radio radio-info">
<input type="radio" checked="checked" value="yes" name="radio4" id="radio4Yes">
<label for="radio4Yes">HTML</label>
<input type="radio" value="no" name="radio4" id="radio4No">
<label for="radio4No">JS</label>
</div>
<div class="radio radio-warning">
<input type="radio" checked="checked" value="yes" name="radio5" id="radio5Yes">
<label for="radio5Yes">Chrome</label>
<input type="radio" value="no" name="radio5" id="radio5No">
<label for="radio5No">Firefox</label>
</div>
<div class="radio radio-danger">
<input type="radio" checked="checked" value="yes" name="radio6" id="radio6Yes">
<label for="radio6Yes">iOS</label>
<input type="radio" value="no" name="radio6" id="radio6No">
<label for="radio6No">Android</label>
</div>

State options

Use of different color opacity helps to destigues between different states such as disable

<div class="radio radio-primary">
<input type="radio" disabled="disabled" value="Disabled" name="Disabled" id="Disabled">
<label for="Disabled">Disabled</label>
<input type="radio" disabled="disabled" checked="checked" value="ADisabled" name="ADisabled" id="ADisabled">
<label for="ADisabled">Disabled</label>
</div>