What causes "Input type "${type}" isn't supported by matInput." in angular/components?

Remove matInput and the mat-form-field wrapper for non-text controls; use , , , or a plain .

Input type "${type}" isn't supported by matInput.

Error message

Input type "${type}" isn't supported by matInput.

What it means

MatInput validates its type input against MAT_INPUT_INVALID_TYPES (button, checkbox, color, file, hidden, image, radio, range, reset, submit) because matInput requires a text-like field that participates in form control value binding. Setting an unsupported type throws getMatInputUnsupportedTypeError naming the type.

Source

Thrown at src/material/input/input.ts:491

      this._previousPlaceholder = placeholder;
      placeholder
        ? element.setAttribute('placeholder', placeholder)
        : element.removeAttribute('placeholder');
    }
  }

  /** Gets the current placeholder of the form field. */
  protected _getPlaceholder(): string | null {
    return this.placeholder || null;
  }

  /** Make sure the input is a supported type. */
  protected _validateType() {
    if (
      MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1 &&
      (typeof ngDevMode === 'undefined' || ngDevMode)
    ) {
      throw getMatInputUnsupportedTypeError(this._type);
    }
  }

  /** Checks whether the input type is one of the types that are never empty. */
  protected _isNeverEmpty() {
    return this._neverEmptyInputTypes.indexOf(this._type) > -1;
  }

  /** Checks whether the input is invalid based on the native validation. */
  protected _isBadInput() {
    // The `validity` property won't be present on platform-server.
    let validity = (this._elementRef.nativeElement as HTMLInputElement).validity;
    return validity && validity.badInput;
  }

  /**
   * Implemented as part of MatFormFieldControl.
   * @docs-private

View on GitHub (pinned to 0411926e7d)

Solutions

Remove matInput and the mat-form-field wrapper for non-text controls; use <mat-checkbox>, <mat-radio-group>, <mat-select>, or a plain <input type="file">.
Use type="text" with a pattern/input-mode, or a dedicated component (mat-chip-list, mat-slider for range).
If type is dynamic, guard the binding so invalid types never reach the input: [type]="isValidType(t) ? t : 'text'".

Example fix

// before
<mat-form-field><input matInput type="file" (change)="onFile($event)"></mat-form-field>
// after
<input type="file" (change)="onFile($event)">

Defensive patterns

Strategy: type-guard

Validate before calling

const MAT_INPUT_INVALID_TYPES = ['button','checkbox','color','file','hidden','image','radio','range','reset','submit'];
if (MAT_INPUT_INVALID_TYPES.includes(type)) {
  throw new Error(`type "${type}" requires a non-matInput control`);
}

Type guard

function isSupportedMatInputType(t: string): boolean {
  return !['button','checkbox','color','file','hidden','image','radio','range','reset','submit'].includes(t);
}

Try / catch

try {
  component.type = desiredType;
  component._validateType();
} catch (e) {
  if ((e as Error).message.includes("isn't supported by matInput")) {
    console.warn(`Falling back to text for type "${desiredType}"`);
    component.type = 'text';
  } else { throw e; }
}

Prevention

Use MatCheckbox/MatRadio/MatSelect instead of matInput for those control kinds
Keep file inputs outside mat-form-field as plain inputs
If [type] is dynamic, intersect the value with supported types before binding

When it happens

Trigger: Writing <input matInput type="checkbox">, type="file", type="radio", etc., or binding [type]="expr" where the expression evaluates to one of the invalid types.

Common situations: Wanting a checkbox/file inside a mat-form-field (should use mat-checkbox or a plain input); dynamic type inputs that switch to 'file' for uploads; copy-pasting native input attributes onto matInput.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/a131ae11ade49ffd. Report an issue: GitHub.