Material
Components
CDK
Guides
8.2.3
arrow_drop_down
format_color_fill
GitHub
Components
CDK
Guides
menu
Select
Form Controls
keyboard_arrow_up
Autocomplete
Checkbox
Datepicker
Form field
Input
Radio button
Select
Slider
Slide toggle
Navigation
keyboard_arrow_up
Menu
Sidenav
Toolbar
Layout
keyboard_arrow_up
Card
Divider
Expansion Panel
Grid list
List
Stepper
Tabs
Tree
Buttons & Indicators
keyboard_arrow_up
Button
Button toggle
Badge
Chips
Icon
Progress spinner
Progress bar
Ripples
Popups & Modals
keyboard_arrow_up
Bottom Sheet
Dialog
Snackbar
Tooltip
Data table
keyboard_arrow_up
Paginator
Sort header
Table
overview
api
examples
Examples for select
Basic select
open_in_new
Basic mat-select
Favorite food
Basic native select
Volvo
Saab
Mercedes
Audi
Cars
*
Select with 2-way value binding
open_in_new
Option 2
Select an option
You selected: option2
Select in a form
open_in_new
mat-select
Favorite food
Selected food:
native html select
Volvo
Saab
Mercedes
Favorite car
Selected car:
Select with form field features
open_in_new
mat select
Favorite animal
*
native html select
Saab
Mercedes
Audi
Select your car (required)
*
You can pick up your favorite car here
Disabled select
open_in_new
Disable select
mat-select
Choose an option
native html select
Volvo
Saab
Mercedes
Audi
Choose an option
Select with reset option
open_in_new
mat-select
State
native html select
Volvo
Saab
Mercedes
Audi
Select your car
Select with option groups
open_in_new
mat-select
Pokemon
native html select
volvo
Saab
Mercedes
Audi
Cars
Select with multiple selection
open_in_new
Toppings
Select with custom trigger text
open_in_new
Toppings
Toppings
Select with no option ripple
open_in_new
Select an option
Select with custom panel styling
open_in_new
Red
Panel color
Select with a custom ErrorStateMatcher
open_in_new
mat-select
Valid option
Choose one
Errors appear instantly!
native html select
Valid option
Invalid option
Choose one
Select a theme!
View source
Edit in StackBlitz