switch.spec.html

<link href="switch.css" rel="stylesheet">

<label class="matter-switch">
    <input type="checkbox" role="switch" checked>
    <span>Switched On</span>
</label>

<br/><br/><br/>

<label class="matter-switch">
    <input type="checkbox" role="switch">
    <span>Switched Off</span>
</label>

<br/><br/><br/>

<label class="matter-switch">
    <input type="checkbox" role="switch" disabled checked>
    <span>Switched On</span>
</label>

<br/><br/><br/>

<label class="matter-switch">
    <input type="checkbox" role="switch" disabled>
    <span>Switched Off</span>
</label>

<br/><br/><br/>

<label id="sized" class="matter-switch" style="width: 200px;">
    <input type="checkbox" role="switch">
    <span>Sized</span>
</label>

<br/><br/><br/>

<label id="xmas" class="matter-switch" style="width: 150px;">
    <input type="checkbox" role="switch">
    <span>Xmas Tree</span>
</label>