Select

Basic select

{{ food.viewValue }}

Select with 2-way value binding

None Option 1 Option 2 Option 3

You selected: {{select}}

Select in a form

{{food.viewValue}}

Selected value: {{selectedValue}}

Select with form field features

-- {{animal.name}} Please choose an animal {{animalControl.value?.sound}}

Disabled select

Disable select

Option 1 Option 2 (disabled) Option 3

Select with reset option

None {{state}}

Select with option groups

-- None -- {{ pokemon.viewValue }}

Select with multiple selection

{{topping}}

Select with custom trigger text

{{topping.value ? topping.value[0] : ''}} (+{{topping.value.length - 1}} others) {{topping}}

Select with no option ripple

Option 1 Option 2 Option 3

Select with custom panel styling

Red Green Blue

Select with a custom ErrorStateMatcher

Clear Valid option Invalid option Errors appear instantly! You must make a selection Your selection is invalid

Examples
Option 1 Option 2 Option 3