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

Tags are used within the Tag list component in input fields to represent selected values: Select Multiple, Tag autocomplete, Tag input.

Color
Disabled State
Icon
“Remove” Button

Tags are most commonly used with a “Remove” button to allow users to delete a selected value from an input field. In some cases, tag removal should be disabled—when that’s the case, the close (×) icon should be hidden.

Long Text

Tag text does not wrap to a new line; instead, it is truncated with an ellipsis.

Removal

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

Selection

Tags can be selected in several ways:

  • Click on the tag or set focus on it.
  • Space when the tag is focused.
  • Programmatic selection through the component API.

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

Editing

To enable editing mode, set the editable property for kbq-tag.

Entering edit mode:

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

Saving changes:

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

Canceling changes:

  • On pressing Escape key.
  • On losing focus.
Validation During Editing

Do not use tag editing when complex validation is expected. Editing is configured so that it's impossible to save a tag with an invalid value. To prevent saving, use the preventEditSubmit attribute.

Recommendations

Use a Badge if you need a colored label in a table or key-value list. Tags should be used exclusively as tokens within input controls.

Keyboard navigation
Focus on tag
Key
 Action
Space Select/deselect tag.
Delete / Backspace Remove tag.
F2 / Enter Start editing.
Ctrl + A Select all tags.
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.