Tags Plugin

The tags plugin enhances the tagging experience by supporting comma-separated input and paste operations for creating multiple tags at once.

Usage

<select
  data-dot-select
  data-plugins="tags"
  data-create-items="true"
  data-searchable="true"
  multiple
  data-placeholder="Enter tags separated by commas..."
>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select
      data-dot-select
      data-plugins="tags"
      data-create-items="true"
      data-searchable="true"
      multiple
      data-placeholder="Enter tags separated by commas..."
    >
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="js">JavaScript</option>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-plugins="tags"
    data-create-items="true"
    data-searchable="true"
    multiple
    data-placeholder="Enter tags separated by commas..."
  >
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

WARNING

The tags plugin requires data-create-items="true" and data-searchable="true" to function. Without these, the user cannot type new values.

Comma-Separated Input

When the tags plugin is active, typing a comma (or the configured separator) immediately creates a tag from the text before the separator:

Type: "react, vue, angular"
Result: Three tags — "react", "vue", "angular"

Leading and trailing whitespace around each tag is automatically trimmed.

Custom Separator

Change the separator character with data-tags-separator:

<!-- Semicolon separator -->
<select
  data-dot-select
  data-plugins="tags"
  data-create-items="true"
  data-searchable="true"
  data-tags-separator=";"
  multiple
  data-placeholder="Separate with semicolons..."
>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <!-- Semicolon separator -->
    <select
      data-dot-select
      data-plugins="tags"
      data-create-items="true"
      data-searchable="true"
      data-tags-separator=";"
      multiple
      data-placeholder="Separate with semicolons..."
    >
    </select>
  )
}

<template>
  <!-- Semicolon separator -->
  <select
    data-dot-select
    data-plugins="tags"
    data-create-items="true"
    data-searchable="true"
    data-tags-separator=";"
    multiple
    data-placeholder="Separate with semicolons..."
  >
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Paste Support

The tags plugin intercepts paste events and splits the pasted text by the separator character:

• Pasting "react, vue, angular, svelte" creates four individual tags
• Works with text copied from spreadsheets (each cell becomes a tag)
• Duplicate values are automatically ignored

Combining with Other Plugins

A common combination is tags + remove-button:

<select
  data-dot-select
  data-plugins="tags,remove-button"
  data-create-items="true"
  data-searchable="true"
  multiple
  data-placeholder="Type or paste tags..."
>
  <option value="bug" selected>Bug</option>
  <option value="feature" selected>Feature</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select
      data-dot-select
      data-plugins="tags,remove-button"
      data-create-items="true"
      data-searchable="true"
      multiple
      data-placeholder="Type or paste tags..."
    >
      <option value="bug" selected>Bug</option>
      <option value="feature" selected>Feature</option>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-plugins="tags,remove-button"
    data-create-items="true"
    data-searchable="true"
    multiple
    data-placeholder="Type or paste tags..."
  >
    <option value="bug" selected>Bug</option>
    <option value="feature" selected>Feature</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Styling

Tags inherit the standard DotSelect item styling. Customize for a tag-like appearance:

.dot-select .ds-item {
  background-color: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 9999px;
  padding: 1px 10px;
  font-size: 0.85rem;
}