Remove Button Plugin

The remove-button plugin adds a small "x" button to each selected item, allowing users to remove individual selections with a single click.

Usage

<select data-dot-select data-plugins="remove-button" multiple data-placeholder="Select items...">
  <option value="js" selected>JavaScript</option>
  <option value="py" selected>Python</option>
  <option value="rb">Ruby</option>
  <option value="go">Go</option>
  <option value="rs">Rust</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="remove-button" multiple data-placeholder="Select items...">
      <option value="js" selected>JavaScript</option>
      <option value="py" selected>Python</option>
      <option value="rb">Ruby</option>
      <option value="go">Go</option>
      <option value="rs">Rust</option>
    </select>
  )
}

<template>
  <select data-dot-select data-plugins="remove-button" multiple data-placeholder="Select items...">
    <option value="js" selected>JavaScript</option>
    <option value="py" selected>Python</option>
    <option value="rb">Ruby</option>
    <option value="go">Go</option>
    <option value="rs">Rust</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>

Behavior

• A small "x" icon appears on the right side of each selected item (left side in RTL mode)
• Clicking the button removes that single item from the selection
• The removed option becomes available again in the dropdown
• The ds:item:remove event fires when an item is removed via the button

Combining with Other Plugins

The remove button works well alongside other plugins:

<select
  data-dot-select
  data-plugins="remove-button,tags,clear-button"
  data-create-items="true"
  data-searchable="true"
  multiple
  data-placeholder="Add or remove tags..."
>
  <option value="bug" selected>Bug</option>
  <option value="feature" selected>Feature</option>
  <option value="docs">Documentation</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="remove-button,tags,clear-button"
      data-create-items="true"
      data-searchable="true"
      multiple
      data-placeholder="Add or remove tags..."
    >
      <option value="bug" selected>Bug</option>
      <option value="feature" selected>Feature</option>
      <option value="docs">Documentation</option>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-plugins="remove-button,tags,clear-button"
    data-create-items="true"
    data-searchable="true"
    multiple
    data-placeholder="Add or remove tags..."
  >
    <option value="bug" selected>Bug</option>
    <option value="feature" selected>Feature</option>
    <option value="docs">Documentation</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

The remove button uses the .ds-item-remove CSS class. Customize its appearance:

.dot-select .ds-item-remove {
  font-size: 14px;
  color: #94a3b8;
  margin-left: 4px;
  cursor: pointer;
}

.dot-select .ds-item-remove:hover {
  color: #ef4444;
}

Accessibility

The remove button includes an aria-label attribute with the localized "Remove" text. This label is set by the removeItem key in the active locale.

TIP

For single-select elements, use data-allow-clear="true" instead of the remove-button plugin. The remove button is designed for multiple-select scenarios where individual items need to be removed.