Form Fields & Inputs

mat-form-field with outline and fill appearances, matInput, prefix/suffix icons.

Basic Form Fields

mat-form-field with outline and fill appearances, prefix/suffix icons.

Text Input

Filled Input

HTML

<mat-form-field appearance="outline">
  <mat-label>Text Input</mat-label>
  <input matInput placeholder="Enter text" />
</mat-form-field>
<mat-form-field appearance="fill">
  <mat-label>Filled Input</mat-label>
  <input matInput placeholder="Filled style" />
  <mat-icon matIconSuffix>search</mat-icon>
</mat-form-field>

Input Types

mat-form-field with different input types (number, email).

Number

HTML

<mat-form-field appearance="outline">
  <mat-label>Number</mat-label>
  <input matInput type="number" value="42" />
</mat-form-field>
<mat-form-field appearance="outline">
  <mat-label>Email</mat-label>
  <input matInput type="email" placeholder="user@example.com" />
</mat-form-field>