<div
  ng-disabled="form.readonly"
  class="schema-form-checkbox {{ form.htmlClass }}"
  ng-class="{
    'has-error': form.disableErrorState !== true && hasError(),
    'has-success': form.disableSuccessState !== true && hasSuccess()
  }"
>
  <label
    title="{{ form.title | translate }}"
    class="c8y-checkbox {{ form.labelHtmlClass }}"
    for="sf-{{ form.key.slice(-1)[0] + $id }}"
  >
    <input
      type="checkbox"
      sf-changed="form"
      ng-disabled="form.readonly"
      ng-model="$$value$$"
      ng-model-options="form.ngModelOptions"
      schema-validate="form"
      class="{{ form.fieldHtmlClass }}"
      title="{{ form.title | translate }}"
      id="sf-{{ form.key.slice(-1)[0] + $id }}"
      name="sf-{{ form.key.slice(-1)[0] + $id }}"
    />
    <span></span>
    <!-- To hide the label set form.labelHtmlClass to 'no-label' -->
    <span ng-bind-html="form.title | translate"></span>
  </label>
  <div class="help-block" sf-message="form.description | translate"></div>
</div>
