<h2 class="toc">Switch</h2>

<p class="alert alert-danger">
  <strong>Deprecated</strong> in favour of Bootstrap 4.2
  <a href="https://getbootstrap.com/docs/4.2/components/forms/#switches"><code>.custom-switch</code></a>.
  (Note: it doesn't support colors. But still, avoid this component.)
</p>

{% apply view_source %}
<label for="sw1">On</label>
<div class="switch-primary round">
  <input type="checkbox" id="sw1" name="sw1" checked>
  <label for="sw1"></label>
</div>
<label for="sw1">Off</label>
{% end %}

<h3>Switch colors</h3>

{% apply view_source %}
<div class="round switch-success"  ><input type="checkbox" id="sw2" checked><label for="sw2"></label></div>
<div class="round switch-danger"   ><input type="checkbox" id="sw3" checked><label for="sw3"></label></div>
<div class="round switch-warning"  ><input type="checkbox" id="sw4" checked><label for="sw4"></label></div>
<div class="round switch-info"     ><input type="checkbox" id="sw5" checked><label for="sw5"></label></div>
<div class="round switch-secondary"><input type="checkbox" id="sw6" checked><label for="sw6"></label></div>
{% end %}

<h3>Switch border radius</h3>

{% apply view_source %}
<div class="switch-primary                 "><input type="checkbox" id="sw7" checked><label for="sw7"></label></div>
<div class="switch-primary border-radius-sm"><input type="checkbox" id="sw8" checked><label for="sw8"></label></div>
<div class="switch-primary border-radius   "><input type="checkbox" id="sw9" checked><label for="sw9"></label></div>
<div class="switch-primary border-radius-lg"><input type="checkbox" id="swa" checked><label for="swa"></label></div>
<div class="switch-primary border-radius-xl"><input type="checkbox" id="swb" checked><label for="swb"></label></div>
<div class="switch-primary round           "><input type="checkbox" id="swc" checked><label for="swc"></label></div>
{% end %}

<h3>Switch size</h3>

{% apply view_source %}
<div class="switch-primary w-25"><input type="checkbox" id="swd" checked><label for="swd"></label></div>
{% end %}
