InputTag

The InputTag component allows users to add content as tags.

Basic Usage

Press the Enter key to add the input as a tag.

Custom Trigger

You can customize the key used to trigger the input tag. The default key is Enter.


Maximum Tags

You can set a limit on the number of tags that can be added.

Collapse Tags 2.11.0

Use the collapse tags attribute to merge them into one piece of text. You can use the collapse tags tooltip property to enable the behavior of hovering over collapsed text to display specific selected values. Using the collapse tags tooltip attribute will render the max attribute invalid.

use collapse-tags

use collapse-tags-tooltip

use max-collapse-tags

Disabled

You can set the InputTag to be disabled.

tag1tag2tag3

Clearable

You can set whether to show the clear button.

tag1tag2tag3

Custom Clear Icon 2.11.0

You can customize the clear icon by setting the clear-icon attribute.

customclearicon

Draggable

You can set whether tags can be dragged.

tag1tag2tag3

Delimiter 2.9.9

You can add a tag when a delimiter is matched.

Sizes

Add size attribute to change the size of InputTag. In addition to the default size, there are two other options: large, small.



Custom Tag

You can customize the tag content by tag slot.


tag1
tag2
tag3

Custom Prefix and Suffix

You can customize the prefix and suffix of the InputTag by prefix and suffix slot.

API

Attributes

NameDescriptionTypeDefault
model-value / v-modelbinding valuearray
maxmax number tags that can be enternumber
tag-typetag typeenuminfo
tag-effecttag effectenumlight
triggerthe key to trigger input tagenumEnter
draggablewhether tags can be draggedbooleanfalse
delimiter 2.9.9add a tag when a delimiter is matchedstring / regex
sizeinput box sizeenum
collapse-tags 2.11.0whether to collapse tags to a text when multiple selectingbooleanfalse
collapse-tags-tooltip 2.11.0whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be truebooleanfalse
save-on-blur 2.9.7whether to save the input value when the input loses focusbooleantrue
clearablewhether to show clear buttonbooleanfalse
clear-icon 2.11.0custom clear icon componentstring / objectCircleClose
disabledwhether to disable input-tagbooleanfalse
validate-eventwhether to trigger form validationbooleantrue
readonlysame as readonly in native inputbooleanfalse
autofocussame as autofocus in native inputbooleanfalse
idsame as id in native inputstring
tabindexsame as tabindex in native inputstring / number
max-collapse-tags 2.11.0the max tags number to be shown. To use this, collapse-tags must be truenumber1
maxlengthsame as maxlength in native inputstring / number
minlengthsame as minlength in native inputstring / number
placeholderplaceholder of inputstring
autocompletesame as autocomplete in native inputstringoff
aria-label a11ynative aria-label attributestring

Events

NameDescriptionType
changetriggers when the modelValue changeFunction
inputtriggers when the input value changeFunction
add-tagtriggers when a tag is addedFunction
remove-tagtriggers when a tag is removedFunction
focustriggers when InputTag focusesFunction
blurtriggers when InputTag blursFunction
cleartriggers when the clear icon is clickedFunction

Slots

NameDescriptionType
tagcontent as tagobject
prefixcontent as InputTag prefix
suffixcontent as InputTag suffix

Exposes

NameDescriptionType
focusfocus the input elementFunction
blurblur the input elementFunction

Source

ComponentStyleDocs

Contributors