Sneak Peek! CoreUI 3 is coming! Please try the latest version - CoreUI PRO 3.0.0-alpha.. Try CoreUI PRO 3.0.0-alpha
Bootstrap switches
Switch default
<label class="switch switch-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label>Switch default - pills
<label class="switch switch-pill switch-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label>Switch outline
<label class="switch switch-outline-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label>Switch outline - pills
<label class="switch switch-pill switch-outline-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label>Switch outline alternative
<label class="switch switch-outline-primary-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-secondary-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-success-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-danger-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-warning-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-info-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-light-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-outline-dark-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label>Switch outline alternative - pills
<label class="switch switch-pill switch-outline-primary-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-secondary-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-success-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-danger-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-warning-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-info-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-light-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-pill switch-outline-dark-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label>Switch with text
<label class="switch switch-label switch-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label>Switch with text - pills
<label class="switch switch-pill switch-label switch-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label>Switch with text outline
<label class="switch switch-label switch-outline-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label>Switch with text outline - pills
<label class="switch switch-pill switch-label switch-outline-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label>Switch with text outline alternative
<label class="switch switch-label switch-outline-primary-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-secondary-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-success-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-danger-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-warning-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-info-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-light-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-label switch-outline-dark-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label>Switch with text outline alternative - pills
<label class="switch switch-pill switch-label switch-outline-primary-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-secondary-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-success-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-danger-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-warning-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-info-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-light-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> <label class="switch switch-pill switch-label switch-outline-dark-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label>Switch with icon
<label class="switch switch-label switch-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label>Switch with icon - pills
<label class="switch switch-label switch-pill switch-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label>Switch with icon outline
<label class="switch switch-label switch-outline-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label>Switch with icon outline - pills
<label class="switch switch-label switch-pill switch-outline-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label>Switch with icon outline alternative
<label class="switch switch-label switch-outline-primary-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-secondary-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-success-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-danger-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-warning-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-info-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-light-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-outline-dark-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label>Switch with icon outline alternative - pills
<label class="switch switch-label switch-pill switch-outline-primary-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-secondary-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-success-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-danger-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-warning-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-info-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-light-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label> <label class="switch switch-label switch-pill switch-outline-dark-alt"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span> </label>3D Switch
<label class="switch switch-3d switch-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-3d switch-secondary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-3d switch-success"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-3d switch-danger"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-3d switch-warning"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-3d switch-info"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-3d switch-light"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-3d switch-dark"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label>Switch sizes
<label class="switch switch-lg switch-3d switch-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-3d switch-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label> <label class="switch switch-sm switch-3d switch-primary"> <input type="checkbox" class="switch-input" checked> <span class="switch-slider"></span> </label>- Switch default
- Switch default - pills
- Switch outline
- Switch outline - pills
- Switch outline alternative
- Switch outline alternative - pills
- Switch with text
- Switch with text - pills
- Switch with text outline
- Switch with text outline - pills
- Switch with text outline alternative
- Switch with text outline alternative - pills
- Switch with icon
- Switch with icon - pills
- Switch with icon outline
- Switch with icon outline - pills
- Switch with icon outline alternative
- Switch with icon outline alternative - pills
- 3D Switch
- Switch sizes