Toggle switch

Use it instead of a checkbox for simple “On/Off” options.

Regular toggle switch

This component uses a checkbox and the pseudo selector :checked to enable toggling without Javascript. The label is optional, but remember to add a title atribute when not providing a label.

<label class="c8y-switch" title="Switch on/off" >
  <input type="checkbox">
  <span></span>
</label>

<label class="c8y-switch">
  <input type="checkbox" checked="checked">
  <span></span> Optional label
</label>

<label class="c8y-switch">
  <input type="checkbox">
  <span></span> Don't show again
</label>

Large containing the label

Add uib-btn-checkbox to any Button.btn and toggle the class active.

Refer to Angular UI Bootstrap's Buttons for usage instructions.

<button type="button" class="btn active" uib-btn-checkbox>
  <i data-c8y-icon="warning" class="status critical fa fw fa-warning"></i>
  Critical
</button>

<button type="button" class="btn" uib-btn-checkbox>
  <i data-c8y-icon="exclamation-circle" class="status major fa fw fa-exclamation-circle"></i>
  Major
</button>

<button type="button" class="btn active" uib-btn-checkbox>
  <i data-c8y-icon="exclamation-circle" class="status minor fa fw fa-exclamation-circle"></i>
  Minor
</button>

<button type="button" class="btn active" uib-btn-checkbox>
  <i data-c8y-icon="circle" class="status warning fa fw fa-circle"></i>
  Warning
</button>