Overview
matInput is a directive that allows native <input> and <textarea> elements to work with <mat-form-field>. It adds Material Design styling and behavior to native form controls.
Basic Usage
API Reference
Selector: input[matInput], textarea[matInput], select[matNativeControl]
Exported as: matInput
Whether the input is disabled.
Unique id of the element. Auto-generated if not provided.
Placeholder text for the input.
Whether the input is required.
Input type of the element. Supported types: text, email, password, number, tel, url, search, date, datetime-local, month, time, week.
An object used to control when error messages are shown.
The input element’s value.
Whether the element is readonly.
Whether the input should remain interactive when it is disabled.
Properties
Whether the input is focused.
Whether the input is empty.
Whether the label should float.
Whether the input is in an error state.
Methods
focus(options?: FocusOptions)
Focuses the input.
Refreshes the error state of the input.
Text Input
<mat-form-field>
<mat-label>Username</mat-label>
<input matInput type="text">
</mat-form-field>
<mat-form-field>
<mat-label>Age</mat-label>
<input matInput type="number" min="0" max="120">
</mat-form-field>
<mat-form-field>
<mat-label>Email</mat-label>
<input matInput type="email">
</mat-form-field>
<mat-form-field>
<mat-label>Password</mat-label>
<input matInput type="password">
</mat-form-field>
Textarea
<mat-form-field>
<mat-label>Comments</mat-label>
<textarea matInput rows="5"></textarea>
</mat-form-field>
Accessibility
- The matInput directive ensures proper ARIA attributes are set
- Labels are automatically associated with inputs
- Error messages are announced to screen readers via
aria-describedby
- Required fields are indicated with
aria-required="true"
- Invalid fields are marked with
aria-invalid="true"
- The input inherits accessibility features from the parent
mat-form-field
Advanced Usage
Auto-resize Textarea
<mat-form-field>
<mat-label>Auto-resize textarea</mat-label>
<textarea matInput cdkTextareaAutosize></textarea>
</mat-form-field>
Character Counter
<mat-form-field>
<mat-label>Bio</mat-label>
<textarea matInput maxlength="256" #bio></textarea>
<mat-hint align="end">{{bio.value.length}}/256</mat-hint>
</mat-form-field>
<mat-form-field>
<mat-label>Amount</mat-label>
<span matPrefix>$ </span>
<input matInput type="number">
<span matSuffix>.00</span>
</mat-form-field>
Custom Error State Matcher
import { ErrorStateMatcher } from '@angular/material/core';
import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
<mat-form-field>
<input matInput [formControl]="emailControl" [errorStateMatcher]="matcher">
</mat-form-field>
Disabled Interactive
Allow disabled inputs to remain interactive (e.g., for copying text):
<mat-form-field>
<input matInput [disabled]="true" [disabledInteractive]="true" value="Read-only value">
</mat-form-field>