<div class="demo-preview-block"> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1"> <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" > <span class="mdl-checkbox__label">Check me out</span> </label> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2"> <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" > <span class="mdl-checkbox__label">I'm just a Material girl in a Material world</span> </label> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-4"> <input type="checkbox" id="checkbox-4" class="mdl-checkbox__input" > <span class="mdl-checkbox__label">Try using checkboxes</span> </label> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-5"> <input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled > <span class="mdl-checkbox__label">But not this one</span> </label> </div>