<div class="sf-form-switch">
<input type="checkbox" class="sf-form-switch-input sf-form-switch-input-lg" id="switchExample3LG" />
<label for="switchExample3LG">Large Switch</label>
</div>
<div class="sf-form-switch">
<input type="checkbox" class="sf-form-switch-input" id="switchExampleMD" />
<label for="switchExampleMD">Middle Switch</label>
</div>
<div class="sf-form-switch">
<input type="checkbox" class="sf-form-switch-input sf-form-switch-input-sm" id="switchExampleSM" />
<label for="switchExampleSM">Small Switch</label>
</div>
<div class="sf-form-switch switch-default">
<input type="checkbox" class="sf-form-switch-input" id="switchExamplePalette11-ligth" />
<label for="switchExamplePalette11-ligth">Default</label>
</div>
<div class="sf-form-switch switch-primary">
<input type="checkbox" class="sf-form-switch-input" id="switchExamplePalette111-ligth" />
<label for="switchExamplePalette111-ligth">Default</label>
</div>
<div class="sf-form-switch switch-secondary">
<input type="checkbox" class="sf-form-switch-input" id="switchExamplePalette21-ligth" />
<label for="switchExamplePalette21-ligth">Secondary</label>
</div>
<div class="sf-form-switch switch-success">
<input type="checkbox" class="sf-form-switch-input" id="switchExamplePalette31-ligth" />
<label for="switchExamplePalette31-ligth">Success</label>
</div>
<div class="sf-form-switch switch-info">
<input type="checkbox" class="sf-form-switch-input" id="switchExamplePalette41-ligth" />
<label for="switchExamplePalette41-ligth">Info</label>
</div>
<div class="sf-form-switch switch-warning">
<input type="checkbox" class="sf-form-switch-input" id="switchExamplePalette51-ligth" />
<label for="switchExamplePalette51-ligth">Warning</label>
</div>
<div class="sf-form-switch switch-danger">
<input type="checkbox" class="sf-form-switch-input" id="switchExamplePalette6-ligth1" />
<label for="switchExamplePalette61-ligth">Danger</label>
</div>