{{'<'}}mat-form-field{{'>'}} is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages. In this document, "form field" refers to the wrapper component {{'<'}}mat-form-field{{'>'}} and "form field control" refers to the component that the {{'<'}}mat-form-field{{'>'}} is wrapping (e.g. the input, textarea, select, etc.) The following Angular Material components are designed to work inside a {{'<'}}mat-form-field{{'>'}}:

• {{'<'}}input matNativeControl{{'>'}} & {{'<'}}textarea matNativeControl{{'>'}}
• {{'<'}}select matNativeControl{{'>'}}
• {{'<'}}mat-select{{'>'}}
• {{'<'}}mat-chip-list{{'>'}}

The {{'<'}}mat-form-field{{'>'}} supports 4 different appearance variants which can be set via the appearance input. The legacy appearance is the default style that the {{'<'}}mat-form-field{{'>'}} has traditionally had. It shows the input box with an underline underneath it. The standard appearance is a slightly updated version of the legacy appearance that has spacing that is more consistent with the fill and outline appearances. The fill appearance displays the form field with a filled background box in addition to the underline. Finally the outline appearance shows the form field with a border all the way around, not just an underline.

There are a couple differences to be aware of between the legacy appearance and the newer standard, fill, and outline appearances. The matPrefix and matSuffix elements are center aligned by default for the newer appearances. The Material Design spec shows this as being the standard way to align prefix and suffix icons in the newer appearance variants. We do not recommend using text prefix and suffixes in the new variants because the label and input do not have the same alignment. It is therefore impossible to align the prefix or suffix in a way that looks good when compared with both the label and input text.

The second important difference is that the standard, fill, and outline appearances do not promote placeholders to labels. For the legacy appearance specifying {{'<'}}input placeholder="placeholder"{{'>'}} will result in a floating label being added to the mat-form-field. For the newer variants it will just add a normal placeholder to the input. If you want a floating label, add a {{'<'}}mat-label{{'>'}} to the mat-form-field.

More