Tags

Used for marking and selection.

Basic Usage

User can't add two equal tags.

Add tag

Lable text

<template>
  <div class="flex flex-col">
    <HcTags
      v-model="value"
      label="Lable text"
      placeholder="Add tag"
    />
  </div>
</template>

<script lang="ts" setup>
import { HcTags } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

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

Readonly

Change the state of the component to readonly with the readonly property.

Lable text

<template>
  <div class="flex flex-col">
    <HcTags
      v-model="value"
      label="Lable text"
      placeholder="Add tag"
      readonly
    />
  </div>
</template>

<script lang="ts" setup>
import { HcTags } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value = ref<string[]>(['tag1', 'tag2', 'tag3']);
</script>

Disable editing

Use prop disableEditing if you need to allow user only create tags not edit.

Add tag

Lable text

<template>
  <div class="flex flex-col">
    <HcTags
      v-model="value"
      label="Lable text"
      placeholder="Add tag"
      disable-editing
    />
  </div>
</template>

<script lang="ts" setup>
import { HcTags } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

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

Errors

Use props errorMsg to show error message and error state of the component

Add tag

Lable text

This fild is required

<template>
  <div class="flex flex-col">
    <HcTags
      v-model="value"
      label="Lable text"
      placeholder="Add tag"
      error-msg="This fild is required"
    />
  </div>
</template>

<script lang="ts" setup>
import { HcTags } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

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

Types

TagState: new | editing | complete;

Tag:

Option	Type
id	string
state	TagState
prevState	TagState
value	string

Props

Property	Type	Values	Description	Default
modelValue	String[]	String[]	binding value	false
maxLength	Number	Number	max count of the tags	undefined
label	String	String	label text
placeholder	String	String	placeholder text of tag input
errorMsg	String	String	error message
readonly	Boolean	Boolean	whether component is read only	false
disableEditing	Boolean	Boolean	whether user can edit tag text after creating	false

Slots

Property	Type	Values	Description	Default
label-suffix		-	customize label suffix content

Events

Property	Type	Values	Description
update:model-value	Function	value - string[]	triggers when the binding value changes
blur	Function	value - string[]	triggers when Tags blurs
focus	Function	value - Tag	triggers when Tags focuses

Tags #

Basic Usage #

Readonly #

Disable editing #

Errors #

Types #

Props #

Slots #

Events #

Tags

Basic Usage

Readonly

Disable editing

Errors

Types

Props

Slots

Events