<div class="demo-preview-block"> <p>A radio button can either be a primary action or a secondary action.</p> <section class="demo-preview-block"> <div id="wifi" class="mdl-radio-group"> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1"> <input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="1" checked> <span class="mdl-radio__label">Always</span> </label> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2"> <input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="2"> <span class="mdl-radio__label">Only when plugged in</span> </label> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3"> <input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="3"> <span class="mdl-radio__label">Never</span> </label> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi4"> <input type="radio" id="wifi4" class="mdl-radio__button" name="wifi[]" value="3" disabled> <span class="mdl-radio__label">Unavailable option</span> </label> </label> </div> <button id="show-wifi-value" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Show value</button> </div> </section>