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