Description
The Tags component allows users to add and remove tags. It extends the ShadowComponent class.
Basic Usage
Use the Tags component to allow users to add and remove tags. Tags can be added by typing them into
the input field and pressing Enter or by pasting a comma-separated list of tags. You can delete a tag by clicking
on it.
<k-tags>
<label>Tags</label>
</k-tags>Allowed Tags
Use the allowedTags attribute to specify a comma-separated list of allowed tags. Only these tags can
be added.
<k-tags allowed-tags="tag1,tag2,tag3">
<label>Allowed Tags</label>
</k-tags>Disallowed Tags
Use the disallowedTags attribute to specify a comma-separated list of disallowed tags. These tags
cannot be added.
<k-tags disallowed-tags="tag1,tag2,tag3">
<label>Disallowed Tags</label>
</k-tags>JavaScript Reference
Constructor
Extends ShadowComponent
new Tags()
Requirements
Properties
value: string
A comma-separated list of tags. Syncs with the value attribute.
allowedTags: string
A comma-separated list of allowed tags. If specified, only these tags can be added. Syncs with the
allowed-tags attribute.
disallowedTags: string
A comma-separated list of disallowed tags. If specified, these tags cannot be added. Syncs with the
disallowed-tags attribute.
Methods
addTag(tag): void
Adds a tag to the list of tags.
removeTag(tag): void
Removes a tag from the list of tags.
validateTags(): string
Validates the list of tags against the allowed and disallowed tags and returns the valid tags as a comma-separated string.
renderTags(): Promise<void>
Re-renders the tag elements in the component.
Events
change
Fired when the value changes. Detail contains { oldValue, newValue }.
addtag
Fired when a tag is added. Detail contains { tag }.
removetag
Fired when a tag is removed. Detail contains { tag }.
allowedtagschange
Fired when the allowed tags list changes. Detail contains { oldValue, newValue }.
disallowedtagschange
Fired when the disallowed tags list changes. Detail contains { oldValue, newValue }.