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