InputTag

Used for inputting and managing multiple tags.

Basic Usage

Bind a tag array with v-model. Press Enter or , to confirm input and add a tag.

VueReact

Current tags: Vue, React

Basic Usage

Disabled State

Use the disabled attribute to disable the input field.

Tag 1Tag 2

Disabled State

Limit Count

Use the max attribute to limit the maximum number of tags.

Inputted 0 / 5 tags

Limit Count

Clearable

Use the clearable attribute to enable one-click clear functionality.

JavaScriptTypeScript

Clearable

Collapsible Tags

Use the collapse-tags attribute to collapse multiple tags. Combine with collapse-tags-tooltip to show all tags on hover.

use collapse-tags:

Tag 1 + 4

use collapse-tags-tooltip:

Tag 1 + 4

use max-collapse-tags:

Tag 1Tag 2Tag 3 + 2

Collapsible Tags

Draggable Sorting

Use the draggable attribute to sort tags by dragging.

Draggable 1Draggable 2Draggable 3Draggable 4

Drag tags to change order

Draggable Sorting

Prefix and Suffix

Use prefix and suffix attributes to add prefix and suffix.

Tag:

VueReact

VueReact

units

Prefix and Suffix

Tag Effect

Use tag-effect to set the display effect of tags.

Tag One

Tag One

Tag One

Tag Effect

Different Sizes

Use the size attribute to control the input size.

Tag One

Tag One

Tag One

Different Sizes

Use in Nuxt

InputTag is fully compatible with Nuxt 3/4. In SSR scenarios, existing tags (modelValue) are rendered directly as static HTML tags on the server, ensuring visual consistency on the first screen and being SEO-friendly.

SSRNuxt 3

Use in Nuxt

SSR Notes:

• ✅ Initial tag array is fully supported for SSR synchronous rendering.
• ✅ Tag styles, themes (tag-effect), and sizes support server-side rendering.
• ✅ Prefix/suffix text and icons are placed and displayed on the server.
• ⚠️ Dynamic addition (Enter confirmation), draggable sorting, and deleting tags take effect after client-side activation (Hydration).
• 💡 Virtual scrolling (for extremely long tag lists, if enabled) renders the basic visible part on the server.

SSR Performance Optimization

When rendered on the server, the InputTag component dynamically generates optimized HTML fragments based on the length of modelValue, reducing the DOM diff calculations during client hydration and improving interaction response speed.

API

Props

Prop	Description	Type	Default
model-value / v-model	Binding value (Tag array)	string[]	[]
type	Tag type	'primary' | 'success' | 'warning' | 'danger' | 'info'	'info'
size	Size	'large' | 'default' | 'small'	'default'
disabled	Whether to disable	boolean	false
readonly	Whether to set read-only	boolean	false
max	Maximum number of tags	number	—
separator	Separator	string | string[]	[',', 'Enter']
placeholder	Placeholder	string	—
clearable	Whether it is clearable	boolean	false
add-on-blur	Whether to add input content on blur	boolean	true
closable	Whether tags are closable	boolean	true
validate-tag	Validation function	(value: string) => boolean	—
trim	Whether to trim whitespace	boolean	true
allow-duplicate	Whether to allow duplicate tags	boolean	false
collapse-tags	Whether to collapse tags	boolean	false
collapse-tags-tooltip	Whether to show tooltip when collapsed	boolean	false
max-collapse-tags	Maximum number of tags to show before collapsing	number	1
draggable	Whether draggable sorting is enabled	boolean	false
tag-effect	Tag effect	'dark' | 'light' | 'plain'	'light'
prefix	Prefix text	string	—
suffix	Suffix text	string	—
prefix-icon	Prefix icon	Component	—
suffix-icon	Suffix icon	Component	—

Events

Event Name	Description	Callback Parameters
change	Triggered when tags change	(value: string[]) => void
input	Triggered on input	(value: string) => void
add	Triggered when a tag is added	(tag: string) => void
remove	Triggered when a tag is removed	(tag: string, index: number) => void
focus	Triggered on focus	(event: FocusEvent) => void
blur	Triggered on blur	(event: FocusEvent) => void
clear	Triggered on clear	() => void
drag-end	Triggered when dragging ends	(tags: string[]) => void

Slots

Slot Name	Description	Scoped Parameters
prefix	Custom prefix content	—
suffix	Custom suffix content	—
tag	Custom tag content	{ tag: string, index: number, close: () => void }
clear-icon	Custom clear icon	—
collapse-tag	Custom collapsed tag content	{ count: number, tags: string[] }

Expose

Name	Description	Type
focus	Focus the input field	() => void
blur	Blur the input field	() => void
clear	Clear all tags	() => void

Theme Variables

Variable	Description	Default
--yh-input-tag-min-height	Minimum height	var(--yh-component-size-default)
--yh-input-tag-font-size	Font size	var(--yh-font-size-base)
--yh-input-tag-bg-color	Background color	var(--yh-fill-color-blank)
--yh-input-tag-border-color	Border color	var(--yh-border-color)
--yh-input-tag-tag-height	Tag height	22px
--yh-input-tag-gap	Tag gap	4px