Playground

Flip every input live to see how the autocomplete reacts. Toggles bind to multiple, freeSolo, loading, readOnly, the auto-behaviours, sizes and appearance, so you can explore the whole surface in one 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"
  [multiple]="multiple()"
  [freeSolo]="freeSolo()"
  [loading]="loading()"
  [appearance]="appearance()"
  [size]="size()"
  label="Movie" />

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
`multiple`	`boolean`	`false`	Allow selecting several values, rendered as chips.
`freeSolo`	`boolean`	`false`	Allow arbitrary values not bound to the options.
`disableClearable`	`boolean`	`false`	Hide the clear button / prevent clearing.
`readOnly`	`boolean`	`false`	Make the control read-only.
`loading`	`boolean`	`false`	Show a loading indicator and loadingText.
`autoHighlight`	`boolean`	`false`	Automatically highlight the first option.
`autoSelect`	`boolean`	`false`	Select the highlighted option on blur.
`disableCloseOnSelect`	`boolean`	`false`	Keep the popup open after a selection.
`openOnFocus`	`boolean`	`false`	Open the popup as soon as the input is focused.
`showCheckboxes`	`boolean`	`false`	Render a checkbox in front of each option (multiple).
`appearance`	`'fill' \| 'outline'`	`'fill'`	Material form-field appearance.
`size`	`'small' \| 'medium'`	`'medium'`	Field density.