Material Design: how to disconnect float label for select?

Question

I need to create select field without float label but I want to have placeholder and default value.

I read docs https://material.angular.io/components/form-field/overview#floating-label and tried to do it by myself.

<mat-form-field [floatLabel]="never">
  <mat-select placeholder="All categories" [formControl]="catForm" multiple> //First opportunity for use placeholder
    <mat-option *ngFor="let category of categories" [value]="category.name">
      {{ category.name }}
    </mat-option>
  </mat-select>
  <!-- <mat-placeholder>All categories</mat-placeholder> -->//Second opportunity for use placeholder
</mat-form-field>

And anyway I get float label. That am I doing wrong?

Answer 1

The correct way is that:

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

Square brackets for variables.

Answer 2

Sergei R has the correct usage for basic inputs (input type=text) but for the dropdown (select), it simply doesn't work. Even the Angular Material docs (https://material.angular.io/components/form-field/overview#floating-label) have sample code that (when augmented for this specific scenario, floatLabel="never"), indicate that it doesn't work: https://angular-vij8al.stackblitz.io

I added the fourth example of how to get the placeholder effect without the label (but you lose the ability to use more complex text).

Answer 3

You can remove float label even on mat-select by putting the following into your global styles.scss:

.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
  .mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label{
    display: none !important;
  }

If you want to apply this to only one mat-select, you can just specify it further in the above code.

I had given up when I saw the previous answers that said it simply can't be done, until I saw this answer for a different question about floatLabel: https://stackoverflow.com/a/66531080/14100714

Answer 4

Just Use this in scss:-

::ng-deep .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label{
  display: none !important;
}