<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="field.id">
    <input type="checkbox"
           [attr.id]="field.id"
           [attr.required]="isRequired()"
           class="mdl-checkbox__input"
           [checked]="field.value"
           [(ngModel)]="field.value"
           (ngModelChange)="checkVisibility(field)"
           [disabled]="field.readOnly">
    <span class="mdl-checkbox__label">{{field.name}}</span>
</label>
