Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them. Inside an input you can enter your own tags or be force to select among a list of them.

Design and behaviour

In a Tag input you write your tag and press enter to consolidate it. If you want to remove it you select it and press Delete key.

Model driven / Reactive example

Output: {{reactiveForm.controls['tag-input-reactive'].value | json}}

Output: {{reactiveForm.controls['tag-input-number'].value | json}}

Output: {{reactiveForm.controls['tag-input-integer'].value | json}}

Output: {{reactiveForm.controls['tag-input-reactive-required'].value | json}}

Output: {{reactiveForm.controls['tag-input-reactive-autocomplete'].value | json}}

Output: {{reactiveForm.controls['tag-input-auto-completed-group-list'].value | json}}

Template driven example

Usage and best practices

Multiple or single tags can be used to categorize items.
Use Tags when content is mapped to multiple categories, and the user needs a way to differentiate between them.
Tags can also be used as a method of filtering data, to show only items within that particular category.