Sizes & appearances

Every combination of field density and Material appearance. size switches between the default medium and a denser small field, appearance chooses the fill or outline form-field style, and fullWidth stretches the field to fill its container.

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" size="small" appearance="fill" label="Movie" />
<autocomplete [options]="films" [(value)]="value" size="medium" appearance="outline" label="Movie" />
<autocomplete [options]="films" [(value)]="value" [fullWidth]="true" appearance="outline" 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
`size`	`'small' \| 'medium'`	`'medium'`	Field density.
`appearance`	`'fill' \| 'outline'`	`'fill'`	Material form-field appearance.
`fullWidth`	`boolean`	`false`	Stretch the field to fill its container.