<div class="demo-preview-block"> <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1"> <input type="checkbox" id="switch-1" class="mdl-switch__input" > <span class="mdl-switch__label">Switch me</span> </label> <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2"> <input type="checkbox" id="switch-2" class="mdl-switch__input" > <span class="mdl-switch__label">Flip me left and right</span> </label> <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-4"> <input type="checkbox" id="switch-4" class="mdl-switch__input" > <span class="mdl-switch__label">Me too</span> </label> <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-5"> <input type="checkbox" id="switch-5" class="mdl-switch__input" disabled > <span class="mdl-switch__label">Can't touch this</span> </label> </div>