library

Angular Material Select

mat-select is a form control shipped in @angular/material (current: 22.0.4, MIT license, ~1.87M npm downloads/week as of July 2026), maintained by the Angular team at Google inside the angular/components monorepo, versioned in lockstep with Angular core (Material 22.x pairs with Angular 22). It renders its options panel inside a CDK Overlay (.cdk-overlay-container appended to document.body, outside the component's own DOM), which is why panelClass and the MAT_SELECT_CONFIG token's overlayPanelClass (added v11+) exist as workarounds for scoped CSS not reaching the panel. It implements the ARIA 1.2 combobox pattern (role="listbox" popup) and disallows nested interactive controls inside mat-option. It ships with zero built-in search/filter box — tracked as open GitHub issue angular/components#5697 for years — so the de facto fix is the community package ngx-mat-select-search (~162K npm downloads/week). Current version/status: 22.0.4 (July 2026). License: MIT. Maintained by Angular team at Google (angular/components monorepo).

Also known as: Material Select, Angular Material Dropdown, MatSelect, Material Design Select, Angular Material Selection
🧊Why learn Angular Material Select?

Reach for mat-select when the control already lives in a mat-form-field and you need Material-consistent styling, checkbox multi-select, or custom option templates — not for a 5,000-row country picker on mobile. For large lists or mobile-first flows, use a plain native select instead: Angular's own docs literally say to "prefer a native select element over MatSelect" for accessibility and performance, and the default ripple animation on options adds measurable overhead on mobile (disableRipple is the escape hatch). Need search-within-select or toggle-all for multi=true? Don't hand-roll it — bolt on ngx-mat-select-search, since the Angular team has left #5697 unresolved for years. Honest weakness, straight from the maintainers: their own component is not the accessible default — the native control is. Known weakness: Angular Material's own documentation states you should "prefer a native select element over MatSelect" when possible, because the native control gives the most accessible experience across the widest range of platforms.

Compare Angular Material Select

Learning Resources

Related Tools

Alternatives to Angular Material Select