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.
Disabled
You can set the InputTag to be disabled.
Clearable
You can set whether to show the clear button.
Custom Clear Icon 2.11.0
You can customize the clear icon by setting the clear-icon
attribute.
Draggable
You can set whether tags can be dragged.
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.
Custom Prefix and Suffix
You can customize the prefix and suffix of the InputTag by prefix
and suffix
slot.
API
Attributes
Name | Description | Type | Default |
---|---|---|---|
model-value / v-model | binding value | array | — |
max | max number tags that can be enter | number | — |
tag-type | tag type | enum | info |
tag-effect | tag effect | enum | light |
trigger | the key to trigger input tag | enum | Enter |
draggable | whether tags can be dragged | boolean | false |
delimiter 2.9.9 | add a tag when a delimiter is matched | string / regex | — |
size | input box size | enum | — |
collapse-tags 2.11.0 | whether to collapse tags to a text when multiple selecting | boolean | false |
collapse-tags-tooltip 2.11.0 | whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be true | boolean | false |
save-on-blur 2.9.7 | whether to save the input value when the input loses focus | boolean | true |
clearable | whether to show clear button | boolean | false |
clear-icon 2.11.0 | custom clear icon component | string / object | CircleClose |
disabled | whether to disable input-tag | boolean | false |
validate-event | whether to trigger form validation | boolean | true |
readonly | same as readonly in native input | boolean | false |
autofocus | same as autofocus in native input | boolean | false |
id | same as id in native input | string | — |
tabindex | same as tabindex in native input | string / number | — |
max-collapse-tags 2.11.0 | the max tags number to be shown. To use this, collapse-tags must be true | number | 1 |
maxlength | same as maxlength in native input | string / number | — |
minlength | same as minlength in native input | string / number | — |
placeholder | placeholder of input | string | — |
autocomplete | same as autocomplete in native input | string | off |
aria-label a11y | native aria-label attribute | string | — |
Events
Name | Description | Type |
---|---|---|
change | triggers when the modelValue change | Function |
input | triggers when the input value change | Function |
add-tag | triggers when a tag is added | Function |
remove-tag | triggers when a tag is removed | Function |
focus | triggers when InputTag focuses | Function |
blur | triggers when InputTag blurs | Function |
clear | triggers when the clear icon is clicked | Function |
Slots
Name | Description | Type |
---|---|---|
tag | content as tag | object |
prefix | content as InputTag prefix | — |
suffix | content as InputTag suffix | — |
Exposes
Name | Description | Type |
---|---|---|
focus | focus the input element | Function |
blur | blur the input element | Function |