Atmos
  • Getting Started
  • Build System
    • Gulp
      • Gulp 4
    • Page Structure
    • Sass Modules
  • UI Elements
    • Colors
    • Buttons
    • Icons
    • Cards
    • Alerts
    • Modals
    • Avatar
    • Tables
    • Mail Templates
  • forms
    • Form Layouts
    • Switch
    • Tag Input
    • Radio Box
    • Select2
    • Datepickers
    • Masked Input
    • Rangeslider
    • Dropzone Fileupload
    • Form Wizard
    • Form Validation
  • Charts
    • Charts
    • Apex Charts
    • Chartjs
    • Google Charts
    • Chartist
  • Maps
    • Google Maps
    • Vector Maps
  • Starter Template
    • blank template Markup
Powered by GitBook
On this page
  • Switch as radio
  • Switch Size
  1. forms

Switch

PreviousForm LayoutsNextTag Input

Last updated 6 years ago

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