Native Select

Basic

Select your car

Disabled and required

Select your car (disabled)

Floating label

Float with value Not float when empty Float with no value, but with label Float with no value, but with html

Looks

Legacy Standard Fill Outline

Option group

Place holder

Error message, hint, form sumbit

Select your car (required) This field is required You can pick up your favorite car here

Error message with errorStateMatcher

Select your car This field is required You can pick up your favorite car here
mat-select Space above cards:
ngModel Drink None {{ drink.viewValue }} local_drink Pick a drink! You must make a selection

Value: {{ currentDrink }}

Touched: {{ drinkControl.touched }}

Dirty: {{ drinkControl.dirty }}

Status: {{ drinkControl.control?.status }}

Multiple selection Pokemon {{ creature.viewValue }}

Value: {{ currentPokemon }}

Touched: {{ pokemonControl.touched }}

Dirty: {{ pokemonControl.dirty }}

Status: {{ pokemonControl.control?.status }}

Without Angular forms Digimon None {{ creature.viewValue }}

Value: {{ currentDigimon }}

Option groups Pokemon {{ creature.viewValue }} compareWith Drink {{ drink.viewValue }}

Value: {{ currentDrinkObject | json }}

Touched: {{ drinkObjectControl.touched }}

Dirty: {{ drinkObjectControl.dirty }}

Status: {{ drinkObjectControl.control?.status }}

Comparison Mode: {{ compareByValue ? 'VALUE' : 'REFERENCE' }}

Appearance comparison

Legacy None {{ creature.viewValue }}

Standard None {{ creature.viewValue }}

Fill None {{ creature.viewValue }}

Outline None {{ creature.viewValue }}

formControl Food I would like to eat {{ food.viewValue }}

Value: {{ foodControl.value }}

Touched: {{ foodControl.touched }}

Dirty: {{ foodControl.dirty }}

Status: {{ foodControl.status }}

Change event Starter pokemon {{ creature.viewValue }}

Change event value: {{ latestChangeEvent?.value }}

This div is for testing scrolled selects.