Content Comparison

References

• Material Documentation

Example

Image Removed

Image Added

Usage

Structure

<mat-form-field>
  <label class="required">Label Name</label>
  <input matInput type="text">
  <mat-hint>
    Error message here
  </mat-hint>
</mat-form-field>

Container

• Every input should have a mat-form-field container, which formats its' content styles and spacing, and facilitates spacing for any required input field error messages.

Label

• Use <label> for input labels

Input

• Use matInput for all instances of <input type="text">

Required Message

• Use <mat-hint> container if the input is required and needs a ‘required message' e.g. This field is required

• If an input is required, add class=”required” to the label, which will add a red asterix after the label to indicate the field must be completed

Misc

Disabled Inputs

• Use disabled tag within input, which will automatically pull in disabled input styling

  Code Block
  language html
  <input matInput type="text" disabled="disabled"> OR <input matInput type="text" disabled>