Essential form input components with built-in validation, accessibility, and Material Design styling. All form controls integrate seamlessly with Angular's reactive forms and template-driven forms.
Provides consistent styling and behavior for form inputs including labels, hints, errors, and prefix/suffix content.
/**
* Container that wraps form controls and provides Material Design styling
*/
class MatFormField {
@Input() appearance: MatFormFieldAppearance;
@Input() color: ThemePalette;
@Input() floatLabel: FloatLabelType;
@Input() hideRequiredMarker: boolean;
@Input() hintLabel: string;
@Input() subscriptSizing: SubscriptSizing;
getLabelId(): string | null;
getConnectedOverlayOrigin(): ElementRef;
_animateAndLockLabel(): void;
}
type MatFormFieldAppearance = 'fill' | 'outline';
type FloatLabelType = 'always' | 'auto';
type SubscriptSizing = 'fixed' | 'dynamic';
/**
* Directive for form field labels
*/
class MatLabel {
// Applied to mat-label elements
}
/**
* Directive for displaying error messages
* Selector: 'mat-error, [matError]'
*/
class MatError {
@Input() id: string;
}
/**
* Directive for displaying hint text
*/
class MatHint {
@Input() align: 'start' | 'end';
@Input() id: string;
}
/**
* Directive for prefix content in form fields
* Selectors: '[matPrefix], [matIconPrefix], [matTextPrefix]'
*/
class MatPrefix {
@Input('matTextPrefix')
set _isTextSelector(value: '') {
this._isText = true;
}
_isText = false;
// Applied to elements that should appear before the input
}
/**
* Directive for suffix content in form fields
* Selectors: '[matSuffix], [matIconSuffix], [matTextSuffix]'
*/
class MatSuffix {
@Input('matTextSuffix')
set _isTextSelector(value: '') {
this._isText = true;
}
_isText = false;
// Applied to elements that should appear after the input
}
/**
* Interface that form field controls must implement
*/
interface MatFormFieldControl<T> {
readonly value: T | null;
readonly stateChanges: Observable<void>;
readonly id: string;
readonly placeholder: string;
readonly ngControl: NgControl | AbstractControlDirective | null;
readonly focused: boolean;
readonly empty: boolean;
readonly shouldLabelFloat: boolean;
readonly required: boolean;
readonly disabled: boolean;
readonly errorState: boolean;
readonly controlType?: string;
readonly autofilled?: boolean;
readonly userAriaDescribedBy?: string;
readonly disableAutomaticLabeling?: boolean;
readonly describedByIds?: string[];
setDescribedByIds(ids: string[]): void;
onContainerClick(event: MouseEvent): void;
}
/**
* Form field configuration interface
*/
interface MatFormFieldDefaultOptions {
appearance?: MatFormFieldAppearance;
color?: ThemePalette;
hideRequiredMarker?: boolean;
floatLabel?: FloatLabelType;
subscriptSizing?: SubscriptSizing;
}
/**
* Injection tokens for form field configuration
*/
const MAT_FORM_FIELD: InjectionToken<MatFormField>;
const MAT_FORM_FIELD_DEFAULT_OPTIONS: InjectionToken<MatFormFieldDefaultOptions>;
const MAT_ERROR: InjectionToken<MatError>;
const MAT_PREFIX: InjectionToken<MatPrefix>;
const MAT_SUFFIX: InjectionToken<MatSuffix>;
/**
* Form field module
*/
class MatFormFieldModule {
// NgModule for form field functionality
}Enhanced text input directive with Material Design styling and form field integration.
/**
* Directive that enhances native input elements with Material Design styling
*/
class MatInput implements MatFormFieldControl<any> {
@Input() disabled: boolean;
@Input() id: string;
@Input() placeholder: string;
@Input() required: boolean;
@Input() type: string;
@Input() value: any;
@Input() readonly: boolean;
readonly stateChanges: Subject<void>;
readonly empty: boolean;
readonly focused: boolean;
readonly shouldLabelFloat: boolean;
readonly errorState: boolean;
focus(options?: FocusOptions): void;
setDescribedByIds(ids: string[]): void;
onContainerClick(): void;
}
/**
* Configuration interface for inputs
*/
interface MatInputConfig {
appearance?: MatFormFieldAppearance;
}
/**
* Input configuration injection token
*/
const MAT_INPUT_CONFIG: InjectionToken<MatInputConfig>;
/**
* Input module
*/
class MatInputModule {
// NgModule for input functionality
}Usage Examples:
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
@Component({
imports: [MatInputModule, MatFormFieldModule],
template: `
<mat-form-field>
<mat-label>Email</mat-label>
<input matInput type="email" placeholder="Enter your email">
<mat-hint>We'll never share your email</mat-hint>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Password</mat-label>
<input matInput type="password" required>
<mat-error>This field is required</mat-error>
</mat-form-field>
`
})
export class InputExample {}Single and multiple selection dropdown with option filtering and form integration.
/**
* Select component for choosing values from a list of options
*/
class MatSelect implements MatFormFieldControl<any> {
@Input() disabled: boolean;
@Input() disableRipple: boolean;
@Input() tabIndex: number;
@Input() id: string;
@Input() placeholder: string;
@Input() required: boolean;
@Input() multiple: boolean;
@Input() value: any;
@Input() compareWith: (o1: any, o2: any) => boolean;
@Input() panelClass: string | string[] | Set<string> | { [key: string]: any };
@Input() disableOptionCentering: boolean;
@Input() typeaheadDebounceInterval: number;
@Input() sortComparator: (a: MatOption, b: MatOption, options: MatOption[]) => number;
@Output() readonly openedChange: EventEmitter<boolean>;
@Output() readonly selectionChange: EventEmitter<MatSelectChange>;
@Output() readonly valueChange: EventEmitter<any>;
readonly focused: boolean;
readonly empty: boolean;
readonly shouldLabelFloat: boolean;
readonly errorState: boolean;
readonly stateChanges: Observable<void>;
readonly panelOpen: boolean;
readonly selected: MatOption | MatOption[];
readonly triggerValue: string;
open(): void;
close(): void;
focus(options?: FocusOptions): void;
toggle(): void;
}
/**
* Event emitted when select value changes
*/
class MatSelectChange {
constructor(
public source: MatSelect,
public value: any
) {}
}
/**
* Select module
*/
class MatSelectModule {
// NgModule for select functionality
}Individual options and option groups for select and autocomplete components.
/**
* Individual option component for select/autocomplete
*/
class MatOption {
@Input() value: any;
@Input() id: string;
@Input() disabled: boolean;
@Output() readonly onSelectionChange: EventEmitter<MatOptionSelectionChange>;
readonly selected: boolean;
readonly active: boolean;
readonly multiple: boolean;
readonly disableRipple: boolean;
readonly viewValue: string;
select(): void;
deselect(): void;
focus(origin?: FocusOrigin, options?: FocusOptions): void;
getHostElement(): HTMLElement;
}
/**
* Option group component for organizing options
*/
class MatOptgroup {
@Input() label: string;
@Input() disabled: boolean;
}
/**
* Event emitted when option selection changes
*/
class MatOptionSelectionChange {
constructor(
public source: MatOption,
public isUserInput: boolean = false
) {}
}
/**
* Option module
*/
class MatOptionModule {
// NgModule for option functionality
}Tri-state checkbox component with form integration and accessibility support.
/**
* Checkbox component with tri-state support
*/
class MatCheckbox {
@Input() id: string;
@Input() required: boolean;
@Input() labelPosition: 'before' | 'after';
@Input() name: string | null;
@Input() value: string;
@Input() checked: boolean;
@Input() disabled: boolean;
@Input() indeterminate: boolean;
@Input() color: ThemePalette;
@Input() disableRipple: boolean;
@Input() tabIndex: number;
@Output() readonly change: EventEmitter<MatCheckboxChange>;
@Output() readonly indeterminateChange: EventEmitter<boolean>;
readonly inputId: string;
focus(origin?: FocusOrigin, options?: FocusOptions): void;
toggle(): void;
}
/**
* Event emitted when checkbox state changes
*/
class MatCheckboxChange {
constructor(
public source: MatCheckbox,
public checked: boolean
) {}
}
/**
* Default options for checkbox components
*/
interface MatCheckboxDefaultOptions {
color?: ThemePalette;
clickAction?: MatCheckboxClickAction;
}
type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
/**
* Injection token for checkbox default options
*/
const MAT_CHECKBOX_DEFAULT_OPTIONS: InjectionToken<MatCheckboxDefaultOptions>;
/**
* Checkbox module
*/
class MatCheckboxModule {
// NgModule for checkbox functionality
}Radio button group for single selection with form integration.
/**
* Radio button group container
*/
class MatRadioGroup {
@Input() name: string;
@Input() labelPosition: 'before' | 'after';
@Input() value: any;
@Input() selected: MatRadioButton | null;
@Input() disabled: boolean;
@Input() required: boolean;
@Input() color: ThemePalette;
@Output() readonly change: EventEmitter<MatRadioChange>;
touch(): void;
}
/**
* Individual radio button component
*/
class MatRadioButton {
@Input() id: string;
@Input() name: string;
@Input() value: any;
@Input() labelPosition: 'before' | 'after';
@Input() disabled: boolean;
@Input() required: boolean;
@Input() color: ThemePalette;
@Input() checked: boolean;
@Input() disableRipple: boolean;
@Input() tabIndex: number;
@Output() readonly change: EventEmitter<MatRadioChange>;
readonly inputId: string;
readonly radioGroup: MatRadioGroup;
focus(options?: FocusOptions): void;
}
/**
* Event emitted when radio selection changes
*/
class MatRadioChange {
constructor(
public source: MatRadioButton,
public value: any
) {}
}
/**
* Radio module
*/
class MatRadioModule {
// NgModule for radio functionality
}Toggle switch component for boolean values with smooth animations.
/**
* Slide toggle switch for boolean values
*/
class MatSlideToggle {
@Input() disabled: boolean;
@Input() disableRipple: boolean;
@Input() color: ThemePalette;
@Input() tabIndex: number;
@Input() name: string | null;
@Input() id: string;
@Input() labelPosition: 'before' | 'after';
@Input() required: boolean;
@Input() checked: boolean;
@Output() readonly change: EventEmitter<MatSlideToggleChange>;
@Output() readonly dragChange: EventEmitter<void>;
@Output() readonly toggleChange: EventEmitter<void>;
readonly inputId: string;
focus(options?: FocusOptions): void;
toggle(): void;
}
/**
* Event emitted when slide toggle state changes
*/
class MatSlideToggleChange {
constructor(
public source: MatSlideToggle,
public checked: boolean
) {}
}
/**
* Slide toggle module
*/
class MatSlideToggleModule {
// NgModule for slide toggle functionality
}Autocomplete functionality for text inputs with filtered option suggestions.
/**
* Autocomplete panel component
*/
class MatAutocomplete {
@Input() displayWith: ((value: any) => string) | null;
@Input() panelWidth: string | number;
@Input() optionHeight: string | number;
@Input() autoActiveFirstOption: boolean;
@Input() classList: string;
@Input() disableRipple: boolean;
@Input() requireSelection: boolean;
@Output() readonly optionSelected: EventEmitter<MatAutocompleteSelectedEvent>;
@Output() readonly opened: EventEmitter<void>;
@Output() readonly closed: EventEmitter<void>;
@Output() readonly optionActivated: EventEmitter<MatAutocompleteActivatedEvent>;
readonly showPanel: boolean;
readonly isOpen: boolean;
readonly panel: ElementRef;
_setVisibility(): void;
}
/**
* Directive for autocomplete trigger
*/
class MatAutocompleteTrigger {
@Input() matAutocomplete: MatAutocomplete;
@Input() matAutocompletePosition: 'above' | 'below';
@Input() matAutocompleteConnectedTo: MatAutocompleteOrigin;
@Input() matAutocompleteDisabled: boolean;
readonly panelOpen: boolean;
readonly activeOption: MatOption | null;
openPanel(): void;
closePanel(): void;
}
/**
* Directive marking the autocomplete origin
*/
class MatAutocompleteOrigin {
constructor(public elementRef: ElementRef<HTMLElement>) {}
}
/**
* Event emitted when autocomplete option is selected
*/
class MatAutocompleteSelectedEvent {
constructor(
public source: MatAutocomplete,
public option: MatOption
) {}
}
/**
* Event emitted when autocomplete option is activated
*/
class MatAutocompleteActivatedEvent {
constructor(
public source: MatAutocomplete,
public option: MatOption | null
) {}
}
/**
* Autocomplete module
*/
class MatAutocompleteModule {
// NgModule for autocomplete functionality
}Usage Examples:
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormControl } from '@angular/forms';
@Component({
imports: [MatAutocompleteModule, MatInputModule, MatFormFieldModule],
template: `
<mat-form-field>
<mat-label>State</mat-label>
<input matInput [formControl]="stateCtrl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let state of filteredStates | async" [value]="state">
{{state}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
`
})
export class AutocompleteExample {
stateCtrl = new FormControl();
states = ['Alabama', 'Alaska', 'Arizona', /* ... */];
filteredStates = this.stateCtrl.valueChanges.pipe(
startWith(''),
map(state => state ? this._filterStates(state) : this.states.slice())
);
private _filterStates(value: string): string[] {
const filterValue = value.toLowerCase();
return this.states.filter(state =>
state.toLowerCase().includes(filterValue)
);
}
}