Switch

We have created css only switches in atmos, so you do not need to include any additional css or JavaScript files into your project, moreover they also support default browser based validation without any additional configuration.

<label class="cstm-switch">
    <input type="checkbox" name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator "></span>
    <span class="cstm-switch-description">Switch </span>
</label>

<label class="cstm-switch">
    <input type="checkbox" checked name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator "></span>
    <span class="cstm-switch-description">Switch </span>
</label>

<label class="cstm-switch">
    <input type="checkbox" checked name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator bg-success "></span>
    <span class="cstm-switch-description">Switch success</span>
</label>


<label class="cstm-switch">
    <input type="checkbox" checked name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator bg-info "></span>
    <span class="cstm-switch-description">Switch info</span>
</label>

<label class="cstm-switch">
    <input type="checkbox" checked name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator bg-warning "></span>
    <span class="cstm-switch-description">Switch warning</span>
</label>

<label class="cstm-switch">
    <input type="checkbox" checked name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator bg-danger "></span>
    <span class="cstm-switch-description">Switch Danger</span>
</label>

Switch as radio

You can use switch as checkbox as well as radio just change the input type to radio for radio buttons

<label class="cstm-switch">
    <input type="radio" checked name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator bg-danger "></span>
    <span class="cstm-switch-description">Switch Danger</span>
</label>

Switch Size

Just add .size-lg to .custom-switch-indicator for large sizes.

<label class="cstm-switch ">
    <input type="checkbox" required name="option" value="1"
           class="cstm-switch-input ">
    <span class="cstm-switch-indicator size-lg "></span>
    <span class="cstm-switch-description">Large Switch #1</span>
</label>
<label class="cstm-switch m-l-10 ">
    <input type="checkbox" required name="option" value="1"
           class="cstm-switch-input ">
    <span class="cstm-switch-indicator size-lg "></span>
    <span class="cstm-switch-description">Large Switch #2</span>
</label>

You can check switch.scss for further customization