Components

Form Field

Angular Material Form Field provides a consistent layout for form controls, including labels, inputs, and validation messages.

Official docs API reference

Example

Below is an example of how BuilderKit restyles the Angular Material Form Field and gives it a more modern appearance.

Size

Medium

Large

Other options

Disabled

Basic form fields

Label

This is a hint text to help the user understand what to enter.

Prefix & Suffix

Label

.00

Label

⌘K

<mat-form-field>
  <mat-label>Label</mat-label>
  <input matInput placeholder="Placeholder" />
</mat-form-field>

<mat-form-field>
  <mat-label>Label</mat-label>
  <input matInput placeholder="Placeholder" />
  <mat-select value="kg" matSuffix>
    <mat-option value="kg">kg</mat-option>
    <mat-option value="lb">lb</mat-option>
  </mat-select>
</mat-form-field>