<!-- Toggle Switch -->
<label class="ms-switch"> Switch
    <input type="checkbox" checked="checked">
    <span class="ms-slider"></span>
</label>
<label class="ms-switch"> Switch
    <input type="checkbox">
    <span class="ms-slider"></span>
</label>

<!-- Toggle Switch with Ripple effect -->
<label class="ms-switch"> Switch
    <input type="checkbox" checked="checked">
    <span class="ms-slider ripple"></span>
</label>
<label class="ms-switch"> Switch
    <input type="checkbox">
    <span class="ms-slider ripple"></span>
</label>

<!-- Toggle Switch with Accent color -->
<label class="ms-switch accent-purple"> Switch
    <input type="checkbox" checked="checked">
    <span class="ms-slider"></span>
</label>
<label class="ms-switch accent-purple"> Switch
    <input type="checkbox">
    <span class="ms-slider"></span>
</label>

<!-- Toggle Switch with Accent color + Ripple effect -->
<label class="ms-switch accent-purple"> Switch
    <input type="checkbox" checked="checked">
    <span class="ms-slider ripple"></span>
</label>
<label class="ms-switch accent-purple"> Switch
    <input type="checkbox">
    <span class="ms-slider ripple"></span>
</label>

<!-- Disabled Toggle Switch -->
<label class="ms-switch"> Switch
    <input type="checkbox" checked="checked" disabled>
    <span class="ms-slider"></span>
</label>
<label class="ms-switch"> Switch
    <input type="checkbox" disabled>
    <span class="ms-slider"></span>
</label>

<!-- Square Toggle Switch -->
<label class="ms-switch"> Switch
    <input type="checkbox" checked="checked">
    <span class="ms-slider slider-square"></span>
</label>
<label class="ms-switch"> Switch
    <input type="checkbox">
    <span class="ms-slider slider-square"></span>
</label>

<!-- Square Toggle Switch with Ripple effect -->
<label class="ms-switch"> Switch
    <input type="checkbox" checked="checked">
    <span class="ms-slider slider-square ripple"></span>
</label>
<label class="ms-switch"> Switch
    <input type="checkbox">
    <span class="ms-slider slider-square ripple"></span>
</label>

<!-- Square Toggle Switch with Accent color -->
<label class="ms-switch accent-purple"> Switch
    <input type="checkbox" checked="checked">
    <span class="ms-slider slider-square"></span>
</label>
<label class="ms-switch accent-purple"> Switch
    <input type="checkbox">
    <span class="ms-slider slider-square"></span>
</label>

<!-- Square Toggle Switch with Accent color + Ripple effect -->
<label class="ms-switch accent-purple"> Switch
    <input type="checkbox" checked="checked">
    <span class="ms-slider slider-square ripple"></span>
</label>
<label class="ms-switch accent-purple"> Switch
    <input type="checkbox">
    <span class="ms-slider slider-square ripple"></span>
</label>

<!-- Disabled Square Toggle Switch -->
<label class="ms-switch"> Switch
    <input type="checkbox" checked="checked" disabled>
    <span class="ms-slider slider-square"></span>
</label>
<label class="ms-switch"> Switch
    <input type="checkbox" disabled>
    <span class="ms-slider slider-square"></span>
</label>

<!-- Round Toggle Switch -->
<label class="ms-switch"> Switch
    <input type="checkbox" checked="checked">
    <span class="ms-slider slider-round"></span>
</label>
<label class="ms-switch"> Switch
    <input type="checkbox">
    <span class="ms-slider slider-round"></span>
</label>

<!-- Round Toggle Switch with Ripple effect -->
<label class="ms-switch"> Switch
    <input type="checkbox" checked="checked">
    <span class="ms-slider slider-round ripple"></span>
</label>
<label class="ms-switch"> Switch
    <input type="checkbox">
    <span class="ms-slider slider-round ripple"></span>
</label>

<!-- Round Toggle Switch with Accent color -->
<label class="ms-switch accent-purple"> Switch
    <input type="checkbox" checked="checked">
    <span class="ms-slider slider-round"></span>
</label>
<label class="ms-switch accent-purple"> Switch
    <input type="checkbox">
    <span class="ms-slider slider-round"></span>
</label>

<!-- Round Toggle Switch with Accent color + Ripple effect -->
<label class="ms-switch accent-purple"> Switch
    <input type="checkbox" checked="checked">
    <span class="ms-slider slider-round ripple"></span>
</label>
<label class="ms-switch accent-purple"> Switch
    <input type="checkbox">
    <span class="ms-slider slider-round ripple"></span>
</label>

<!-- Disabled Round Toggle Switch -->
<label class="ms-switch"> Switch
    <input type="checkbox" checked="checked" disabled>
    <span class="ms-slider slider-round"></span>
</label>
<label class="ms-switch"> Switch
    <input type="checkbox" disabled>
    <span class="ms-slider slider-round"></span>
</label>