Is it possible to have the mat-label above the outline of the input?

What are you trying to do?

I searched through the documentation and having a problem finding where I can specify a label "floatLabel=always" to be ABOVE the mat-form-field with the outline appearance "appearance=outline".

Is this even possible?

Label not above outline: Screen Shot 2019-12-10 at 11 38 59 AM

Label above outline: Screen Shot 2019-12-10 at 11 41 35 AM

Thank you for any feedback!

Issue Analytics

State:
Created 4 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

tomicarsk6commented, Dec 20, 2019

@omaracrystal Can you close the issue, because it wasn’t really an issue, it was more misunderstanding.

1reaction

tomicarsk6commented, Dec 13, 2019

You can simply put mat-label outside of mat-form-field.

https://stackblitz.com/edit/angular-ggrkhy?file=src/app/form-field-label-example.html

Top Results From Across the Web

How can I put label on top of matInput like bootstrap

Your best bet would be to create a custom input element with content projection using material for styling only the <input> element. –...

Form field - Angular Material

Hint labels are additional descriptive text that appears below the form field's underline. A <mat-form-field> can have up to two hint labels; one...

Form field appearance variants - StackBlitz

Form field appearance variants.

Switching Off the Float Label of Our Angular Material Form Field

We have a material search form field: <mat-form-field><input matInput placeholder="Search"></mat-form-field>. And we want to turn off the floating label.

Changing Angular Material Form Field Appearance

setting outline form field appearance --> <mat-form-field ... Label </mat-label> <input matInput placeholder="Input placeholder" ...