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

Question

Is there any way in which I can stop the placeholder from floating as a label for the following snippet of code?

<form class="search-form">
  <mat-form-field class="example-full-width">
     <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>

I have looked at the official documentation for angular/material, but it seems this feature is now deprecated?

Answer 1

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

Answer 2

<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.