examples/checkbox.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="../less/bootstrap.css"/>
</head>
<body style="margin: 50px;">
<h1>Simples Checkbox</h1>
<span class="material-checkbox">
<input type="checkbox" id="radio1" checked="checked"/>
<label for="radio1">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox red">
<input type="checkbox" id="radio2" />
<label for="radio2">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox pink">
<input type="checkbox" id="radio3" />
<label for="radio3">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox purple">
<input type="checkbox" id="radio4" />
<label for="radio4">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox dpurple">
<input type="checkbox" id="radio5" />
<label for="radio5">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox indigo">
<input type="checkbox" id="radio6" />
<label for="radio6">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox blue">
<input type="checkbox" id="radio7" />
<label for="radio7">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox lblue">
<input type="checkbox" id="radio8" />
<label for="radio8">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox cyan">
<input type="checkbox" id="radio9" />
<label for="radio9">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox teal">
<input type="checkbox" id="radio10" />
<label for="radio10">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox green">
<input type="checkbox" id="radio11" />
<label for="radio11">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox lgreen">
<input type="checkbox" id="radio12" />
<label for="radio12">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox lime">
<input type="checkbox" id="radio13" />
<label for="radio13">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox yellow">
<input type="checkbox" id="radio14" />
<label for="radio14">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox amber">
<input type="checkbox" id="radio15" />
<label for="radio15">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox orange">
<input type="checkbox" id="radio16" />
<label for="radio16">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox dorange">
<input type="checkbox" id="radio17" />
<label for="radio17">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox brown">
<input type="checkbox" id="radio18" />
<label for="radio18">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox grey">
<input type="checkbox" id="radio19" />
<label for="radio19">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox bgrey">
<input type="checkbox" id="radio20" />
<label for="radio20">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox">
<input type="checkbox" id="radio21" disabled />
<label for="radio21">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<span class="material-checkbox">
<input type="checkbox" id="radio22" disabled checked />
<label for="radio22">
<span class="focus"></span>
<span class="checked"></span>
</label>
</span>
<h1>Radio Group</h1>
<label class="material-checkbox inline" for="rg1">
<input type="checkbox" name="rg" id="rg1"/>
<label for="rg1">
<span class="focus"></span>
<span class="checked"></span>
</label>
Choice One
</label>
<label class="material-checkbox inline" for="rg2">
<input type="checkbox" name="rg" id="rg2"/>
<label for="rg2">
<span class="focus"></span>
<span class="checked"></span>
</label>
Choice Two
</label>
<label class="material-checkbox inline" for="rg3">
<input type="checkbox" name="rg" id="rg3"/>
<label for="rg3">
<span class="focus"></span>
<span class="checked"></span>
</label>
Choice Three
</label>
<br/>
<br/>
<label class="material-checkbox purple" for="rg2-1">
<input type="checkbox" name="rg2" id="rg2-1"/>
<label for="rg2-1">
<span class="focus"></span>
<span class="checked"></span>
</label>
Choice One
</label>
<label class="material-checkbox purple" for="rg2-2">
<input type="checkbox" name="rg2" id="rg2-2"/>
<label for="rg2-2">
<span class="focus"></span>
<span class="checked"></span>
</label>
Choice Two
</label>
<label class="material-checkbox purple" for="rg2-3">
<input type="checkbox" name="rg2" id="rg2-3"/>
<label for="rg2-3">
<span class="focus"></span>
<span class="checked"></span>
</label>
Choice Three
</label>
<label class="material-checkbox purple" for="rg2-4">
<input type="checkbox" name="rg2" id="rg2-4" disabled />
<label for="rg2-4">
<span class="focus"></span>
<span class="checked"></span>
</label>
Choice disabled
</label>
<label class="material-checkbox purple" for="rg2-5">
<input type="checkbox" name="rg2" id="rg2-5" disabled checked/>
<label for="rg2-5">
<span class="focus"></span>
<span class="checked"></span>
</label>
Choice disabled checked
</label>
</body>
</html>