Tag Input

Stable

An input that allows adding and removing tags

<script setup lang="ts">
import { ref } from 'vue'
import { HTagInput } from '@holistics/design-system'

const tags = ref<string[]>([])
</script>

<template>
  <HTagInput
    v-model="tags"
    class="w-96"
  />
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
modelValue *	string[]
text	string

Events

Name	Parameters	Description
@blur	[event: FocusEvent]
@focus	[event: FocusEvent]
@input	[event: Event]
@update:modelValue	[value: string[]]
@update:text	[value: string]

Slots

Name	Scoped	Description
#tag	{ tag: string; index: number; }
#input	{ el: HTMLInputElement | undefined; text: string | undefined; attrs: { class: string; style: { width: string; }; onKeydown: (e: KeyboardEvent) => void; onMousedown: (e: MouseEvent) => void; }; }