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.

Enter

Space

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.

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
effect 2.13.2	tooltip theme, built-in theme: `dark` / `light`	`enum` / `string`	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`
drag-tag 2.11.3	triggers when a tag is dragged	`Function`
focus	triggers when InputTag focuses	`Function`
blur	triggers when InputTag blurs	`Function`
clear	triggers when the clear icon is clicked	`Function`