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

Material Design components for Angular

<section>
  <h2>Single selection</h2>
  <p>Select your favorite color</p>

  <mat-form-field>
    <mat-select placeholder="Colors" [(ngModel)]="selectedColor">
      <mat-option *ngFor="let color of colors" [value]="color.value">
        {{ color.label }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</section>

<section>
  <h2>Multiple selection</h2>
  <p>Pick toppings for your pizza</p>

  <mat-form-field>
    <mat-select placeholder="Toppings" [(ngModel)]="selectedTopping" multiple>
      <mat-option *ngFor="let topping of toppings" [value]="topping.value">
        {{ topping.label }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</section>

<section>
  <h2>Grouped options</h2>
  <p>Pick your Pokemon</p>

  <mat-form-field>
    <mat-select placeholder="Pokemon" [(ngModel)]="selectedPokemon">
      <mat-optgroup *ngFor="let group of pokemon" [label]="group.label">
        <mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
          {{ creature.label }}
        </mat-option>
      </mat-optgroup>
    </mat-select>
  </mat-form-field>
</section>

<section>
  <h2>Colors</h2>

  <div class="select-a11y-spacer">
    <mat-form-field  color="primary">
      <mat-select placeholder="ZIP code">
        <mat-option value="2000">2000</mat-option>
        <mat-option value="2100">2100</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field color="accent">
      <mat-select placeholder="State">
        <mat-option value="alaska">Alaska</mat-option>
        <mat-option value="alabama">Alabama</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field color="warn">
      <mat-select placeholder="Language">
        <mat-option value="english">English</mat-option>
        <mat-option value="spanish">Spanish</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <div class="select-a11y-spacer">
    <mat-form-field color="primary">
      <mat-select placeholder="Digimon" multiple>
        <mat-option value="mihiramon">Mihiramon</mat-option>
        <mat-option value="sandiramon">Sandiramon</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field color="accent">
      <mat-select placeholder="Drink" multiple>
        <mat-option value="water">Water</mat-option>
        <mat-option value="coke">Coke</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field color="warn">
      <mat-select placeholder="Theme" multiple>
        <mat-option value="light">Light</mat-option>
        <mat-option value="dark">Dark</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</section>