Combo box

A basic single-select combo box: the value must be chosen from a predefined list of options. Pass an options array, bind the selection with two-way [(value)], and typing filters the list in place.

Overview

Examples

Usage

Import AutocompleteComponent and configure it with the inputs below. The full runnable source is on the Examples tab.

html

<autocomplete
  [options]="films"
  [(value)]="value"
  appearance="outline"
  label="Movie"
  placeholder="Pick a film" />

API

This example demonstrates the inputs below. See the Autocomplete introduction for the complete API — every input, output, content template and filter helper.

Inputs

Name	Type	Default	Description
`options`	`readonly T[]`	`— (required)`	The list of options shown in the panel.
`value`	`T \| T[] \| null`	`null`	Two-way selected value (model). An array when multiple.
`label`	`string \| null`	`null`	Field label (mat-label).
`placeholder`	`string \| null`	`null`	Input placeholder text.
`appearance`	`'fill' \| 'outline'`	`'fill'`	Material form-field appearance.