Tag Input lets users enter multiple values as tags and supports keyboard navigation, selection, and removal.

Tag removal order:

• If there are selected tags, all of them will be removed.
• If there are no selected tags, the focused tag will be removed.

Tags can be removed in several ways:

• Click on the remove icon (kbqTagRemove directive) inside the tag.
• Press Delete or Backspace key.
• Programmatic removal through the component API.

The removal option is configured using the removable attribute (enabled by default).

Tags can be selected in several ways:

• Click on a tag while holding Ctrl.
• Click on a tag while holding Shift to change the selection range from the anchor tag to the clicked tag.
• Press Shift + ← / → to expand or shrink the range.
• Press Ctrl+A key combination.
• Space when the tag is focused.
• Programmatic selection through the component API.

Pointer and keyboard interactions change the same range relative to its initial tag. When the range shrinks, tags outside it are deselected. Disabled tags remain unchanged.

The selection option is configured using the selectable attribute (enabled by default).

To enable editing mode, you need to set the editable property for kbq-tag-list or individual kbq-tag.

Enter editing mode:

• On double click on the tag.
• On pressing Enter or F2 key (when tag is focused).

Save changes:

• On pressing Enter key.
• On clicking the confirmation button (kbqTagEditSubmit directive).

Cancel changes:

• On pressing Escape key.
• On focus loss.

In editing mode, the tag transforms into an input field and remains at the same position within the control.

To enable tag reordering, you need to set the draggable property for kbq-tag-list.

By default, a tag is created on Enter. Additional separator keys are set via kbqTagInputSeparatorKeyCodes and apply both while typing and when pasting from the clipboard.

If a separator should only apply on paste (e.g. a space, which is a common character inside a tag), mark it with appliesTo: ['paste']. Separators without a key (e.g. /\s+/ for any run of whitespace) are paste-only by default, since no keystroke can ever match them.

Application- or module-wide defaults are set via kbqTagsDefaultOptionsProvider:

import { ENTER } from '@koobiq/components/core';
import { kbqTagsDefaultOptionsProvider } from '@koobiq/components/tags';

@NgModule({
    providers: [
        kbqTagsDefaultOptionsProvider({
            separatorKeyCodes: [ENTER],
            separators: [
                { symbol: /\r?\n/, key: 'Enter', keyCode: ENTER, appliesTo: ['input', 'paste'] },
                { symbol: /\s+/, appliesTo: ['paste'] } // paste-only — splits on any whitespace
            ]
        })
    ]
})

Validators belong on <kbq-tag-list>: the tag list is the form control for the whole set of tags, while the input is only a text entry helper. The control value is the array of tags, so a single set of validators covers both the number of tags and the content of each one.

A [formControl] or [ngModel] of its own on <input kbqTagInputFor> is still fine — that is how the typed text can drive autocomplete filtering, for example. The library simply does not consider validators attached to that control: it neither checks them nor puts the field into the error state.

Validators do not prevent a tag from being added: the tag is added and the field goes into the error state — the same way for typing and for pasting from the clipboard. To keep an invalid value out of the list, filter it in the (kbqTagInputTokenEnd) handler. In-place tag editing does not go through that handler — reject a value there with preventEditSubmit.

When the error becomes visible is controlled by ErrorStateMatcher, and by default happens once the control is invalid and either touched or the form has been submitted.

Key	Action
Backspace / ← / Shift + Tab	Move focus to the last tag.
Ctrl + A	Select all tags and set focus to the last one.

Key	Action
← / →	Move focus to previous/next tag.
Shift + ← / →	Change the range and move focus.
Space	Select/deselect tag.
Delete / Backspace	Remove tag.
F2 / Enter	Start editing.
Ctrl + A	Select all tags.
Home / End	Move focus to first/last tag.

Key	Action
Enter	Save changes.
Esc	Cancel changes.