Checkboxes

Multi-select with a checkbox listbox that stays open after each pick. multiple renders the selection as removable chips, showCheckboxes adds a checkbox to each option, disableCloseOnSelect keeps the panel open, and filterSelectedOptions can hide options that are already chosen.

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]="true"
  [showCheckboxes]="true"
  [disableCloseOnSelect]="true"
  appearance="outline"
  label="Movies" />

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.
`showCheckboxes`	`boolean`	`false`	Render a checkbox in front of each option (multiple).
`disableCloseOnSelect`	`boolean`	`false`	Keep the popup open after a selection.
`filterSelectedOptions`	`boolean`	`false`	Hide already-selected options from the listbox.