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

Material Design components for Angular

<section>
  <h2>Single button toggle</h2>
  <mat-button-toggle>Yes</mat-button-toggle>
</section>

<section>
  <h2>Button toggles with icons</h2>
  <mat-button-toggle-group name="alignment" aria-label="Alignments">
    <mat-button-toggle value="left" aria-label="Align left">
      <mat-icon>format_align_left</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="center" aria-label="Align center">
      <mat-icon>format_align_center</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="right" aria-label="Align right">
      <mat-icon>format_align_right</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="justify" aria-label="Align justify">
      <mat-icon>format_align_justify</mat-icon>
    </mat-button-toggle>
  </mat-button-toggle-group>
</section>

<section>
  <h2>Multi-selection button toggle group</h2>
  <mat-button-toggle-group multiple aria-label="Groceries">
    <mat-button-toggle>Flour</mat-button-toggle>
    <mat-button-toggle>Eggs</mat-button-toggle>
    <mat-button-toggle>Sugar</mat-button-toggle>
    <mat-button-toggle>Milk</mat-button-toggle>
  </mat-button-toggle-group>
</section>

<section>
  <h2>Exclusive selection button toggle group</h2>
  <mat-button-toggle-group name="pies" [(ngModel)]="favoritePie"  aria-label="Pies">
    <mat-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
      {{pie}}
    </mat-button-toggle>
  </mat-button-toggle-group>
  <p>Your favorite type of pie is: {{favoritePie}}</p>
</section>

<section>
  <h2>Disabled button toggle group</h2>
  <mat-button-toggle-group [disabled]="true" aria-label="Groceries">
    <mat-button-toggle>Flour</mat-button-toggle>
    <mat-button-toggle>Eggs</mat-button-toggle>
    <mat-button-toggle>Sugar</mat-button-toggle>
    <mat-button-toggle>Milk</mat-button-toggle>
  </mat-button-toggle-group>
</section>

<section>
  <h2>Vertical button toggle group</h2>
  <mat-button-toggle-group multiple [vertical]="true" aria-label="Groceries">
    <mat-button-toggle>Flour</mat-button-toggle>
    <mat-button-toggle>Eggs</mat-button-toggle>
    <mat-button-toggle>Sugar</mat-button-toggle>
    <mat-button-toggle>Milk</mat-button-toggle>
  </mat-button-toggle-group>
</section>