N Dynamic Tags

n-dynamic-tags Component

The n-dynamic-tags component allows users to create and manage tags dynamically. Tags can be added by typing and pressing Enter, and removed by clicking the close button. It supports custom rendering and input elements.

When to Use

Use n-dynamic-tags when you need to:

• Collect multiple tags or labels from users
• Create keyword or category input fields
• Build email recipient or user mention inputs
• Allow users to add and remove items as tags
• Display selected items as removable tags

Basic Usage

Basic Tags Input

<template>
  <n-dynamic-tags v-model:value="tags" />
</template>

<script setup>
import { ref } from 'vue'

const tags = ref(['Tag 1', 'Tag 2'])
</script>

With Maximum Tag Count

<template>
  <n-dynamic-tags v-model:value="tags" :max="3" />
</template>

Different Tag Styles

<template>
  <n-space vertical>
    <n-dynamic-tags v-model:value="tags" type="primary" />
    <n-dynamic-tags v-model:value="tags" type="info" />
    <n-dynamic-tags v-model:value="tags" type="success" />
    <n-dynamic-tags v-model:value="tags" type="warning" />
    <n-dynamic-tags v-model:value="tags" type="error" />
    <n-dynamic-tags v-model:value="tags" round />
  </n-space>
</template>

API Reference

Props

DynamicTagsOption Type

interface DynamicTagsOption {
  label: string
  value: string
}

Events

Slots

Common Patterns

Custom Input Element (with AutoComplete)

<template>
  <n-dynamic-tags v-model:value="tags">
    <template #input="{ submit, deactivate }">
      <n-auto-complete
        ref="autoCompleteInstRef"
        v-model:value="inputValue"
        size="small"
        :options="options"
        placeholder="Email"
        :clear-after-select="true"
        @select="submit($event)"
        @blur="deactivate"
      />
    </template>
  </n-dynamic-tags>
</template>

<script setup>
import { ref } from 'vue'

const tags = ref([])
const inputValue = ref('')
const options = ref([
  { label: 'user1@example.com', value: 'user1@example.com' },
  { label: 'user2@example.com', value: 'user2@example.com' }
])
</script>

Custom Tag Rendering

<template>
  <n-dynamic-tags v-model:value="tags" :render-tag="renderTag" />
</template>

<script setup>
import { h } from 'vue'
import { NTag } from 'naive-ui'

const tags = ref(['Apple', 'Banana', 'Orange'])

const renderTag = (tag, index) => {
  return h(
    NTag,
    {
      type: 'primary',
      bordered: false,
      closable: true,
      onClose: () => tags.value.splice(index, 1)
    },
    { default: () => tag }
  )
}
</script>

Object Formatted Values

<template>
  <n-dynamic-tags v-model:value="value" @create="onCreate" />
  <pre>{{ JSON.stringify(value, null, 2) }}</pre>
</template>

<script setup>
import { ref } from 'vue'

const value = ref([
  { label: 'Vue', value: 'vue' },
  { label: 'React', value: 'react' }
])

const => {
  return {
    label,
    value: label.toLowerCase().replace(/\s+/g, '-')
  }
}
</script>

Custom Tag Creation with Validation

<template>
  <n-dynamic-tags @create="handleCreate" />
</template>

<script setup>
const handleCreate = (label) => {
  if (label.length < 2) {
    return label
  }
  return label.toUpperCase()
}
</script>

Use in Form

<template>
  <n-form :model="model" :rules="rules">
    <n-form-item path="tags" :show-label="false">
      <n-dynamic-tags v-model:value="model.tags" />
    </n-form-item>
  </n-form>
</template>

<script setup>
import { ref } from 'vue'

const model = ref({
  tags: []
})

const rules = {
  tags: {
    type: 'array',
    required: true,
    message: 'At least one tag is required'
  }
}
</script>

Best Practices

1. Use max to limit tag count: Set a maximum number of tags to prevent excessive input.

2. Customize input with slots: Use the input slot for autocomplete or other input components.

3. Use on-create for value transformation: Transform user input before adding as a tag (e.g., lowercase, trim).

4. Use object format for complex data: When tags need both display label and value, use DynamicTagsOption format.

5. Combine with form validation: Wrap in n-form-item for validation support.