TagInput

Input que crea tags al presionar Enter, con soporte para límite máximo, eliminación y prevención de duplicados.

TagInput

Demo

<TagInput v-model="tags" color="success" :max="5" placeholder="Add tag..." />

Props

modelValue

Lista actual de tags (v-model con array de strings).

<TagInput v-model="tags" />

color

Color semántico de los tags.

<TagInput v-model="tagsColor" color="primary" placeholder="Primary" />
<TagInput v-model="tagsColor" color="success" placeholder="Success" />
<TagInput v-model="tagsColor" color="warning" placeholder="Warning" />
<TagInput v-model="tagsColor" color="danger" placeholder="Danger" />

disabled

Deshabilita el input y la interacción con los tags.

vuetypescript

<TagInput v-model="tags" disabled />

placeholder

Placeholder del campo de texto.

<TagInput v-model="tags" placeholder="Añade un skill..." />

max

Número máximo de tags permitidos (0 = sin límite).

<TagInput v-model="tags" :max="5" />

Events

Evento	Payload	Descripción
update:modelValue	string[]	Se emite al añadir o eliminar un tag

API

Prop	Tipo	Default	Descripción
modelValue	string[]	[]	Lista de tags (v-model)
color	'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'	'primary'	Color semántico de los tags
disabled	boolean	false	Deshabilita el input
placeholder	string	'Add tag...'	Placeholder del input
max	number	0	Máximo de tags (0 = sin límite)

Tokens usados

--bg, --border, --font-mono, --text, --color-{name}