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

Material Design components for Angular

<section>
  <h2>Checkbox without label</h2>
  <mat-checkbox aria-label="A single checkbox with no label example"></mat-checkbox>
</section>
<section>
  <h2>Standalone checkbox</h2>
  <div>
    <mat-checkbox>Yes, I agree to the terms and conditions</mat-checkbox>
  </div>
  <div>
    <mat-checkbox [disabled]="true">No, I do not agree to the terms and conditions</mat-checkbox>
  </div>
  <div>
    <mat-checkbox [indeterminate]="true">A partially done task</mat-checkbox>
  </div>
</section>

<section>
  <h2>Nested checklist</h2>
    <div *ngFor="let task of tasks">
      <mat-checkbox [(ngModel)]="task.completed"
                   [checked]="allComplete(task)"
                   [indeterminate]="someComplete(task.subtasks)"
                   (change)="setAllCompleted(task.subtasks, $event.checked)">
        {{task.name}}
      </mat-checkbox>
      <div class="sub-list">
        <div *ngFor="let subtask of task.subtasks">
          <mat-checkbox [(ngModel)]="subtask.completed">
            {{subtask.name}}
          </mat-checkbox>
        </div>
      </div>
    </div>
</section>

<section>
  <h2>Colored checkboxes</h2>
  <mat-checkbox color="primary">Primary</mat-checkbox>
  <mat-checkbox color="accent">Accent</mat-checkbox>
  <mat-checkbox color="warn">Warn</mat-checkbox>
</section>