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 Flag New Form field Highlight 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
Interface and examples language
English
Version
20.2.0
Tag list
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.

Entering the mode:

  • By double-clicking on the tag.
  • By pressing the Enter or F2 key (when focused on the tag).

Saving changes:

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

Canceling changes:

  • By pressing the Escape key.
  • When losing focus.
Drag and drop

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

Keyboard navigation
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.
Suggestions for improvement
If you found a mistake or want to improve the article, create an issue on GitHub.