ipsos-components/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html

Material Design components for Angular

<section>
  <h2>Receive email update</h2>
  <p>Showing a toggle to manage whether receive email update.</p>
  <mat-slide-toggle color="primary" [(ngModel)]="emailToggle">
    Receive email update
  </mat-slide-toggle>
</section>

<section>
  <h2>Music</h2>
  <p>Showing a disabled toggle to control music on/off status.</p>
  <mat-slide-toggle color="accent" [disabled]="true" [(ngModel)]="musicToggle">
    Music {{musicToggle ? 'on' : 'off'}}   (disabled)
  </mat-slide-toggle>
</section>

<section>
  <h2>Terms and conditions</h2>
  <p>Showing a required toggle to accept terms and conditions in a form.</p>
  <form #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>
    <mat-slide-toggle name="termsToggle" required ngModel>
      I agree to terms and conditions
    </mat-slide-toggle>
    <p>
      <button mat-raised-button type="submit">Submit</button>
    </p>
  </form>
</section>