ipsos-components/src/demo-app/checkbox/checkbox-demo.html

Material Design components for Angular

<h1>mat-checkbox: Basic Example</h1>
<form>
<mat-checkbox [(ngModel)]="isChecked"
             name="cb"
             value="basic_checkbox"
             [color]="checkboxColor()"
             (change)="isIndeterminate = false"
             [indeterminate]="isIndeterminate"
             [disabled]="isDisabled"
             [align]="alignment">
  Do you want to <em>foobar</em> the <em>bazquux</em>?

</mat-checkbox> - <strong>{{printResult()}}</strong>
</form>
<div class="demo-checkboxes">
<input id="indeterminate-toggle"
       type="checkbox"
       [(ngModel)]="isIndeterminate"
       [disabled]="isDisabled">
<label for="indeterminate-toggle">Toggle Indeterminate</label>
<input id="disabled-toggle" type="checkbox" [(ngModel)]="isDisabled">
<label for="disabled-toggle">Toggle Disabled</label>
<input id="color-toggle" type="checkbox" [(ngModel)]="useAlternativeColor">
<label for="color-toggle">Toggle Color</label>
</div>
<div>
  <p>Alignment:</p>
  <div>
    <input #start type="radio"
                  value="start"
                  id="align-start"
                  name="alignment"
                  (click)="alignment = start.value"
                  checked>
    <label for="align-start">Start</label>
  </div>
  <div>
    <input #end type="radio"
                  value="end"
                  id="align-end"
                  name="alignment"
                  (click)="alignment = end.value">
    <label for="align-end">End</label>
  </div>
</div>

<h1>Pseudo checkboxes</h1>
<mat-pseudo-checkbox></mat-pseudo-checkbox>
<mat-pseudo-checkbox [disabled]="true"></mat-pseudo-checkbox>

<mat-pseudo-checkbox state="checked"></mat-pseudo-checkbox>
<mat-pseudo-checkbox state="checked" [disabled]="true"></mat-pseudo-checkbox>

<mat-pseudo-checkbox state="indeterminate"></mat-pseudo-checkbox>
<mat-pseudo-checkbox state="indeterminate" [disabled]="true"></mat-pseudo-checkbox>

<h1>Nested Checklist</h1>
<mat-checkbox-demo-nested-checklist></mat-checkbox-demo-nested-checklist>