MDL-Selection





Checkbox

<!-- Checkbox -->
<label for="checkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
        <input type="checkbox" class="mdl-checkbox__input" id="checkbox1">
        <span class="mdl-checkbox__label">Checkbox</span>
</label>
`</pre>

### Radio Button

<!-- Radio Button -->
<label for="option-1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
    <input type="button" id="option-1" class="mdl-radio__button" name="options" value="1">
    <span class="mdl-radio__label">Radio</span>
</label>

<pre>`&lt;!-- Radio Button --&gt;
&lt;label for="option-1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect"&gt;
    &lt;input type="button" id="option-1" class="mdl-radio__button" name="options" value="1"&gt;
    &lt;span class="mdl-radio__label"&gt;Radio&lt;/span&gt;
&lt;/label&gt;
`</pre>

### Icon Toggle

<!-- Icon Toggle -->
<label for="icon-toggle-1" class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
<input type="checkbox" class="mdl-icon-toggle__input" id="icon-toggle-1">
_Icon_
</label>

<pre>`&lt;!-- Icon Toggle --&gt;
 &lt;label for="icon-toggle-1" class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"&gt;
    &lt;input type="checkbox" class="mdl-icon-toggle__input" id="icon-toggle-1"&gt;
    &lt;i class="mdl-icon-toggle__label material-icons"&gt;Icon&lt;/i&gt;
&lt;/label&gt;
`</pre>

### Switch

<!-- Switch -->
<label for="switch-1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
    <input type="checkbox" class="mdl-switch__input" id="switch-1">
    <span class="mdl-switch__label"></span>
</label>

<pre>`&lt;!-- Switch --&gt;
&lt;label for="switch-1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect"&gt;
    &lt;input type="checkbox" class="mdl-switch__input" id="switch-1"&gt;
    &lt;span class="mdl-switch__label"&gt;&lt;/span&gt;
&lt;/label&gt;

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×