Form Field

Angular Material Form Field provides a consistent layout for form controls, including labels, inputs, and validation messages. It wraps the control in a bordered box with a label above it, room for a prefix or a suffix on either side, and a line underneath for a hint or an error message. BuilderKit restyles that box in four sizes and gives the focus, disabled and invalid states an appearance that matches the rest of the design system.

The same field wraps more than a text input, for example a select, which keeps the label, the hint and the error in the same place across a form.

Example

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

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

Form field sizes

Four sizes share the same shape and differ in height, padding and type scale, so a compact filter bar and a full page form can sit in the same application without looking unrelated.

<mat-form-field class="tiny">
  <mat-label>Tiny</mat-label>
  <input matInput placeholder="Placeholder" />
</mat-form-field>

<mat-form-field class="small">
  <mat-label>Small</mat-label>
  <input matInput placeholder="Placeholder" />
</mat-form-field>

<mat-form-field class="large">
  <mat-label>Large</mat-label>
  <input matInput placeholder="Placeholder" />
</mat-form-field>

iOS focus zoom

iOS Safari zooms the page when a text field under 16px receives focus. Fields keep their size on every viewport by default. To opt in to 16px below 640px, set the mobile font size on the root.

:root {
  --form-field-mobile-font-size: var(--text-xl);
}

Textarea inside a form field

A textarea gets the same box and label as a single line input, and grows with the text instead of scrolling inside a fixed height.

<mat-form-field>
  <mat-label>Notes</mat-label>
  <textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="3" cdkAutosizeMaxRows="8"></textarea>
</mat-form-field>