TagsInput

Overview

Root of a tags input control allowing users to add and remove tag values.

Theme entry: TagsInput

Props

Name	Type	Required	Default	Description
themeOverride	Object		null	A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants.
class	import('vue').HTMLAttributes['class']		undefined	Additional CSS classes to apply to the root element.
modelValue	array		undefined	The controlled value of the tags input. Can be bound with v-model.
defaultValue	array		undefined	The initial value when uncontrolled.
addOnPaste	boolean		undefined	When true, allow adding tags on paste. Works with the delimiter prop.
addOnTab	boolean		undefined	When true, allow adding tags on Tab keydown.
addOnBlur	boolean		undefined	When true, allow adding tags on input blur.
duplicate	boolean		undefined	When true, allow duplicated tags.
disabled	boolean		undefined	When true, prevents user interaction.
delimiter	string|object		undefined	The character or regular expression to trigger addition of a new tag. Also used to split tags on paste.
dir	string		undefined	The reading direction of the tags input.
convertValue	func		undefined	Converts an entered string to the tag value, before the duplicate check runs.
max	number		undefined	Maximum number of tags.
name	string		undefined	The name submitted with the form.
required	boolean		undefined	When true, the field is required.
as	string|object		undefined	The HTML element or component to render as.
asChild	boolean		undefined	Whether to render as a child element.

Slots

default

Scoped slot.

Events

Name	Description
update:modelValue	Emitted when the value changes.
invalid	Emitted when an invalid tag entry is attempted.
addTag	Emitted when a new tag is added.
removeTag	Emitted when a tag is removed.

Full event reference

Source

client/lib/controls/tags-input/TagsInput.vue