Switch

<ul class="SnList">
    <li>
        <input type="checkbox" id="c1">
        <label for="c1">Checkbox</label>
    </li>
    <li>
        <input type="checkbox" id="c2" checked>
        <label for="c2">Checkbox</label>
    </li>
    <li>
        <input type="radio" id="r1" name="radio" value="1">
        <label for="r1">Radio</label>
    </li>
    <li>
        <input type="radio" id="r2" name="radio" value="2" checked>
        <label for="r2">Radio</label>
    </li>
    <li>
        <input type="checkbox" id="s1" class="switch">
        <label for="s1">Switch</label>
    </li>
    <li>
        <input type="checkbox" id="s2" class="switch" checked>
        <label for="s2">Switch</label>
    </li>
</ul>

<ul class="SnList">
    <li>
        <input type="checkbox" id="c1d" disabled>
        <label for="c1d">Checkbox</label>
    </li>
    <li>
        <input type="checkbox" id="c2d" checked disabled>
        <label for="c2d">Checkbox</label>
    </li>
    <li>
        <input type="radio" id="r1d" name="radiod" value="1" disabled>
        <label for="r1d">Radio</label>
    </li>
    <li>
        <input type="radio" id="r2d" name="radiod" value="2" checked disabled>
        <label for="r2d">Radio</label>
    </li>
    <li>
        <input type="checkbox" id="s1d" class="switch" disabled>
        <label for="s1d">Switch</label>
    </li>
    <li>
        <input type="checkbox" id="s2d" class="switch" checked disabled>
        <label for="s2d">Switch</label>
    </li>
</ul>

<div class="SnBtn-group">
    <input type="radio" id="radio1" name="radioimp" class="hidden">
    <label for="radio1" class="SnBtn">Left</label>
    
    <input type="radio" id="radio2" name="radioimp" checked class="hidden">
    <label for="radio2" class="SnBtn">Center</label>
    
    <input type="radio" id="radio3" name="radioimp" class="hidden">
    <label for="radio3" class="SnBtn">Right</label>
</div>