Switch

Темное на светлом

Светлое на темном

<div class="sf-form-switch">
    <input type="checkbox" class="sf-form-switch-input" id="switchExample1" />
    <label for="switchExample1">Неактивный</label>
</div>

Sizing

<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>

Colors Switch Buttons

Темное на светлом

Светлое на темном

<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>