Logo

Basic Examples


      <form class="form">
       <div class="form-group row">
        <label class="col-3 col-form-label">Default Switch</label>
        <div class="col-3">
         <span class="switch">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
        <label class="col-3 col-form-label">With Icon</label>
        <div class="col-3">
         <span class="switch switch-icon">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
       </div>
       <div class="form-group row">
        <label class="col-3 col-form-label">Unchecked State</label>
        <div class="col-3">
         <span class="switch">
          <label>
           <input type="checkbox"  name=""/>
           <span></span>
          </label>
         </span>
        </div>
        <label class="col-3 col-form-label">With Icon</label>
        <div class="col-3">
         <span class="switch switch-icon">
          <label>
           <input type="checkbox"  name=""/>
           <span></span>
          </label>
         </span>
        </div>
       </div>
       <div class="form-group row">
        <label class="col-3 col-form-label">Disabled State</label>
        <div class="col-3">
         <span class="switch">
          <label>
           <input type="checkbox" disabled="disabled"/>
           <span></span>
          </label>
         </span>
        </div>
        <label class="col-3 col-form-label">With Icon</label>
        <div class="col-3">
         <span class="switch switch-icon">
          <label>
           <input type="checkbox" disabled="disabled"/>
           <span></span>
          </label>
         </span>
        </div>
       </div>
      </form>
     

Sizing

Large size:

       <form class="form">
        <div class="form-group row">
         <label class="col-3 col-form-label">Default Switch</label>
         <div class="col-3">
          <span class="switch switch-lg">
           <label>
            <input type="checkbox" checked="checked" name="select"/>
            <span></span>
           </label>
          </span>
         </div>
         <label class="col-3 col-form-label">With Icon</label>
         <div class="col-3">
          <span class="switch switch-lg switch-icon">
           <label>
            <input type="checkbox" checked="checked" name="select"/>
            <span></span>
           </label>
          </span>
         </div>
        </div>
        <div class="form-group row">
         <label class="col-3 col-form-label">Unchecked State</label>
         <div class="col-3">
          <span class="switch switch-lg">
           <label>
            <input type="checkbox" name="select" />
            <span></span>
           </label>
          </span>
         </div>
         <label class="col-3 col-form-label">With Icon</label>
         <div class="col-3">
          <span class="switch switch-lg switch-icon">
           <label>
            <input type="checkbox" name="select" />
            <span></span>
           </label>
          </span>
         </div>
        </div>
        <div class="form-group row">
         <label class="col-3 col-form-label">Disabled State</label>
         <div class="col-3">
          <span class="switch switch-lg">
           <label>
            <input type="checkbox" disabled="disabled"/>
            <span></span>
           </label>
          </span>
         </div>
         <label class="col-3 col-form-label">With Icon</label>
         <div class="col-3">
          <span class="switch switch-lg switch-icon">
           <label>
            <input type="checkbox" disabled="disabled"/>
            <span></span>
           </label>
          </span>
         </div>
        </div>
       </form>
      
Small size:

       <form class="form">
        <div class="form-group row">
         <label class="col-3 col-form-label">Default Switch</label>
         <div class="col-3">
          <span class="switch switch-sm">
           <label>
            <input type="checkbox" checked="checked" name="select"/>
            <span></span>
           </label>
          </span>
         </div>
         <label class="col-3 col-form-label">With Icon</label>
         <div class="col-3">
          <span class="switch switch-sm switch-icon">
           <label>
            <input type="checkbox" checked="checked" name="select"/>
            <span></span>
           </label>
          </span>
         </div>
        </div>
        <div class="form-group row">
         <label class="col-3 col-form-label">Unchecked State</label>
         <div class="col-3">
          <span class="switch switch-sm">
           <label>
            <input type="checkbox" name="select" />
            <span></span>
           </label>
          </span>
         </div>
         <label class="col-3 col-form-label">With Icon</label>
         <div class="col-3">
          <span class="switch switch-sm switch-icon">
           <label>
            <input type="checkbox" name="select" />
            <span></span>
           </label>
          </span>
         </div>
        </div>
        <div class="form-group row">
         <label class="col-3 col-form-label">Disabled State</label>
         <div class="col-3">
          <span class="switch switch-sm">
           <label>
            <input type="checkbox" disabled="disabled"/>
            <span></span>
           </label>
          </span>
         </div>
         <label class="col-3 col-form-label">With Icon</label>
         <div class="col-3">
          <span class="switch switch-sm switch-icon">
           <label>
            <input type="checkbox" disabled="disabled"/>
            <span></span>
           </label>
          </span>
         </div>
        </div>
       </form>
      

Solid Style


      <form class="form">
       <div class="form-group row">
        <label class="col-3 col-form-label">Success</label>
        <div class="col-3">
         <span class="switch switch-success">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
        <label class="col-3 col-form-label">Primary</label>
        <div class="col-3">
         <span class="switch switch-primary">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
       </div>
       <div class="form-group row">
        <label class="col-3 col-form-label">Info</label>
        <div class="col-3">
         <span class="switch switch-info">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
        <label class="col-3 col-form-label">Danger</label>
        <div class="col-3">
         <span class="switch switch-danger">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
       </div>
       <div class="form-group row">
        <label class="col-3 col-form-label">Brand</label>
        <div class="col-3">
         <span class="switch switch-brand">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
        <label class="col-3 col-form-label">Dark</label>
        <div class="col-3">
         <span class="switch switch-dark">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
       </div>
      </form>
                    

Outline Style


      <form class="form">
       <div class="form-group row">
        <label class="col-3 col-form-label">Success</label>
        <div class="col-3">
         <span class="switch switch-outline switch-icon switch-success">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
        <label class="col-3 col-form-label">Warning</label>
        <div class="col-3">
         <span class="switch switch-outline switch-icon switch-warning">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
       </div>
       <div class="form-group row">
        <label class="col-3 col-form-label">Info</label>
        <div class="col-3">
         <span class="switch switch-outline switch-icon switch-info">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
        <label class="col-3 col-form-label">Danger</label>
        <div class="col-3">
         <span class="switch switch-outline switch-icon switch-danger">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
       </div>
       <div class="form-group row">
        <label class="col-3 col-form-label">Primary</label>
        <div class="col-3">
         <span class="switch switch-outline switch-icon switch-primary">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
        <label class="col-3 col-form-label">Brand</label>
        <div class="col-3">
         <span class="switch switch-outline switch-icon switch-brand">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
       </div>
       <div class="form-group row">
        <label class="col-3 col-form-label">Dark</label>
        <div class="col-3">
         <span class="switch switch-outline switch-icon switch-dark">
          <label>
           <input type="checkbox" checked="checked" name="select"/>
           <span></span>
          </label>
         </span>
        </div>
       </div>
      </form>
                    

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo