Overview
<mat-select> is a form control for selecting a value from a set of options, similar to the native <select> element. It is designed to work inside of a <mat-form-field> element.
Basic Usage
<mat-form-field>
<mat-label>Choose an option</mat-label>
<mat-select>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-select-example',
template: `
<mat-form-field>
<mat-label>Favorite food</mat-label>
<mat-select [formControl]="foodControl">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.label }}
</mat-option>
</mat-select>
</mat-form-field>
`
})
export class SelectExample {
foodControl = new FormControl('');
foods = [
{value: 'steak-0', label: 'Steak'},
{value: 'pizza-1', label: 'Pizza'},
{value: 'tacos-2', label: 'Tacos'}
];
}
API Reference
MatSelect
Selector: mat-select
Exported as: matSelect
Whether the select is disabled.
Whether ripples are disabled.
Tab index for the select.
hideSingleSelectionIndicator
Whether checkmark indicator for single-selection options is hidden.
Placeholder to be shown if no value has been selected.
Whether the component is required.
Whether the user should be allowed to select multiple options.
Whether to center the active option over the trigger.
compareWith
(o1: any, o2: any) => boolean
Function to compare the option values with the selected values.
Value of the select control.
Classes to be passed to the select panel.
Unique id of the element.
Object used to control when error messages are shown.
typeaheadDebounceInterval
Time to wait in milliseconds after the last keystroke before moving focus to an item.
Outputs
Event emitted when the select panel has been toggled.
Event emitted when the select panel has been opened.
Event emitted when the select panel has been closed.
selectionChange
EventEmitter<MatSelectChange>
Event emitted when the selected value has been changed by the user.
Methods
Focuses the select element.
Opens the select’s panel.
Closes the select’s panel.
Toggles the select’s panel between open and closed.
MatSelectChange
Reference to the select that emitted the change event.
Current value of the select that emitted the event.
Multiple Selection
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppingsControl" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">
{{ topping }}
</mat-option>
</mat-select>
</mat-form-field>
Option Groups
<mat-form-field>
<mat-label>Pokemon</mat-label>
<mat-select>
<mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name">
<mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon">
{{ pokemon }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
Accessibility
- The select uses
role="combobox" with appropriate ARIA attributes
- The select panel uses
role="listbox"
- Options use
role="option"
- Keyboard navigation is fully supported:
ARROW_UP/DOWN: Navigate through optionsENTER/SPACE: Select the focused optionESCAPE: Close the panel- Type to search for options (typeahead)
- Screen readers announce the selected value and option count
- Use
aria-label or ensure the select has a label via <mat-label>
Advanced Usage
Custom Trigger
<mat-form-field>
<mat-select [formControl]="foodControl">
<mat-select-trigger>
{{ foodControl.value?.label }}
<span *ngIf="foodControl.value?.emoji"> - {{ foodControl.value.emoji }}</span>
</mat-select-trigger>
<mat-option *ngFor="let food of foods" [value]="food">
{{ food.emoji }} {{ food.label }}
</mat-option>
</mat-select>
</mat-form-field>
Disable Option Centering
By default, the select centers the active option. Disable this behavior:
<mat-select [disableOptionCentering]="true">
<!-- options -->
</mat-select>
Custom Comparison
Provide a custom comparison function for object values:
compareObjects(o1: any, o2: any) {
return o1.id === o2.id;
}
<mat-select [compareWith]="compareObjects">
<!-- options -->
</mat-select>
Reset Option
<mat-form-field>
<mat-label>State</mat-label>
<mat-select [(value)]="selectedValue">
<mat-option>None</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
</mat-select>
</mat-form-field>
Error Messages
<mat-form-field>
<mat-label>Favorite food</mat-label>
<mat-select [formControl]="foodControl" required>
<mat-option *ngFor="let food of foods" [value]="food">
{{ food }}
</mat-option>
</mat-select>
<mat-error *ngIf="foodControl.hasError('required')">
Please select a food
</mat-error>
</mat-form-field>