<form>
<section class="form-block">
<label>Checkboxes</label>
<div class="form-group">
<label>Default/Stacked checkbox group</label>
<div class="checkbox">
<input type="checkbox" id="checkrads_1">
<label for="checkrads_1">Checkbox 1</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkrads_2" checked>
<label for="checkrads_2">Checkbox 2</label>
</div>
<div class="checkbox disabled">
<input type="checkbox" id="checkrads_3" disabled>
<label for="checkrads_3">A disabled and unchecked checkbox</label>
</div>
<div class="checkbox disabled">
<input type="checkbox" id="checkrads_4" disabled checked>
<label for="checkrads_4">A disabled and checked checkbox</label>
</div>
</div>
<div class="form-group">
<label>Inline checkbox group</label>
<div class="checkbox-inline">
<input type="checkbox" id="checkrads_5">
<label for="checkrads_5">Checkbox 1</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="checkrads_6" checked>
<label for="checkrads_6">Checkbox 2</label>
</div>
<div class="checkbox-inline disabled">
<input type="checkbox" id="checkrads_7" disabled>
<label for="checkrads_7">A disabled and unchecked checkbox</label>
</div>
<div class="checkbox-inline disabled">
<input type="checkbox" id="checkrads_8" disabled checked>
<label for="checkrads_8">A disabled and checked checkbox</label>
</div>
<div class="form-group">
<label>Indetermiante Checkbox</label>
<div class="checkbox-inline">
<clr-checkbox type="checkbox" id="checkbox_9" [clrIndeterminate]="indeterminateState">
<span (click)="onToggleIndeterminateState($event)">
Toggle Indeterminate State
<!--<button class="btn btn-primary btn-sm" (click)="onToggleIndeterminateState($event)">Toggle Indeterminate State</button>-->
</span>
</clr-checkbox>
</div>
</div>
</section>
</form>