Clear Button Plugin

The clear-button plugin adds a button that clears all selected items at once. This is particularly useful for multiple-select elements with many selections.

Usage

<select data-dot-select data-plugins="clear-button" multiple data-placeholder="Select items...">
  <option value="1" selected>Item 1</option>
  <option value="2" selected>Item 2</option>
  <option value="3" selected>Item 3</option>
  <option value="4">Item 4</option>
  <option value="5">Item 5</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="clear-button" multiple data-placeholder="Select items...">
      <option value="1" selected>Item 1</option>
      <option value="2" selected>Item 2</option>
      <option value="3" selected>Item 3</option>
      <option value="4">Item 4</option>
      <option value="5">Item 5</option>
    </select>
  )
}

<template>
  <select data-dot-select data-plugins="clear-button" multiple data-placeholder="Select items...">
    <option value="1" selected>Item 1</option>
    <option value="2" selected>Item 2</option>
    <option value="3" selected>Item 3</option>
    <option value="4">Item 4</option>
    <option value="5">Item 5</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 "Clear all" button appears inside the control area when at least one item is selected
• Clicking the button removes all selections at once
• The button automatically hides when no items are selected
• The ds:clear event fires when the button is clicked

Difference from data-allow-clear

Feature	data-allow-clear	clear-button plugin
Best for	Single select	Multiple select
Icon	Small "x" near the arrow	Distinct "Clear all" button
Behavior	Clears the single value	Clears all selected items
Requires placeholder option	Yes	No

Example with Remove Button

Combine with remove-button for full control — remove individual items or clear all:

<select
  data-dot-select
  data-plugins="remove-button,clear-button"
  multiple
  data-placeholder="Manage selections..."
>
  <option value="alice" selected>Alice</option>
  <option value="bob" selected>Bob</option>
  <option value="carol" selected>Carol</option>
  <option value="david">David</option>
  <option value="eve">Eve</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,clear-button"
      multiple
      data-placeholder="Manage selections..."
    >
      <option value="alice" selected>Alice</option>
      <option value="bob" selected>Bob</option>
      <option value="carol" selected>Carol</option>
      <option value="david">David</option>
      <option value="eve">Eve</option>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-plugins="remove-button,clear-button"
    multiple
    data-placeholder="Manage selections..."
  >
    <option value="alice" selected>Alice</option>
    <option value="bob" selected>Bob</option>
    <option value="carol" selected>Carol</option>
    <option value="david">David</option>
    <option value="eve">Eve</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 clear button uses the .ds-clear-all CSS class:

.dot-select .ds-clear-all {
  font-size: 12px;
  color: #64748b;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.dot-select .ds-clear-all:hover {
  background-color: #fee2e2;
  color: #dc2626;
}

Accessibility

The clear button includes an aria-label with the localized "Clear all" text from the active locale's clearAll key.