Toggle Indeterminate State
NOTE: Native checkbox elements must set indeterminate state with JavaScript.

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