Angular/Material mat-form-field input - Floating label issues

Praveen Soni's answer above doesn't work for non-legacy versions, as per this:

Note: only the legacy appearance supports the never option. never was originally added as a way to make the floating label emulate the behavior of a standard input placeholder. However the form field now supports both floating labels and placeholders. Therefore in the non-legacy appearances the never option has been disabled in favor of just using the placeholder.

That means you should simply use placeholder instead of the label.

1.Use floatLabel="never" in mat-form-field

<mat-form-field floatLabel="never">
</mat-form-field>

<form class="search-form">
  <mat-form-field class="example-full-width" appearance="standard">
    <input class="toolbar-search" type="text" matInput>
    <mat-placeholder>Search</mat-placeholder>
  <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

Please set the appearance of mat-form-field to standard and the placeholder will stop behaving like label.

Explanation : By default the mat-label in mat-form-field floats and the appearance of mat-form-field is "legacy". That means if a mat-label is not present with the form field then placeholder will start behaving like the label and it floats upwards. So to stop this you should manually update the appearance to "standard", so it stops behaving like label and stays as a placeholder.

assuming you are using latest stable version of material 2,
you can use floatLabel="never" to force label to not to float.

here is live working demo

this is clear in documentation https://material.angular.io/components/form-field/api