Components

Select

Angular Material Select provides a dropdown list of options from which users can choose one or more items.

Official docs API reference

Example

Below is an example of how BuilderKit restyles the Angular Material Select and gives it a more modern appearance.

Size

Medium

Large

Other options

Disabled

Native select

Favorite fruit

Basic select

Favorite fruit

Select your best "fruit"

Multi select

Favorite fruits

<mat-form-field>
  <mat-label>Favorite fruit</mat-label>
  <mat-select placeholder="Select a food">
    @for (option of options; track option.id) {
      @if (option.type === 'group') {
        <mat-optgroup [label]="option.label">
          @for (child of option.children; track child.id) {
            <mat-option [value]="child.value">{{ child.label }}</mat-option>
          }
        </mat-optgroup>
      } @else {
        <mat-option [value]="option.value">{{ option.label }}</mat-option>
      }
    }
  </mat-select>
  <mat-hint align="end">Select your best "fruit"</mat-hint>
</mat-form-field>