Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Form field Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation
Icons
CDK
 Key managers Keycodes
Interface and examples language
English
Version
19.7.0
Tag autocomplete

Tags Autocomplete is used to select one or multiple values from a list and to input custom values.

When focusing on the field, the dictionary menu opens. Autocomplete changes as you type. Selecting an option from the list adds a tag, clears the text in the field, and closes the menu.

Adding to dictionary

The option to create a new tag is placed first in the autocomplete menu. It creates a new token from the entered text if it doesn't exist in the dictionary.

Adding a tag also works with the Tab key.

Creating a duplicate of a selected tag is not allowed: the system will show the message Nothing found.

Tag 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).

Tag selection

Tags can be selected in several ways:

  • Click on a tag while holding Ctrl.
  • Press Ctrl+A key combination.
  • Space when the tag is focused.
  • Programmatic selection through the component API.

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

Editing

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.

Drag and drop

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

Keyboard navigation
Focus in empty input area
Key
 Action
Backspace / ← / Shift + Tab Move focus to the last tag.
Ctrl + A Select all tags and set focus to the last one.
Focus on tag
Key
 Action
← / → Move focus to previous/next tag.
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.
Tag editing mode
Key
 Action
Enter Save changes.
Esc Cancel changes.
Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.