Multiple Select Examples

Basic Multiple Select

A simple multi-value select:

<select data-dot-select multiple data-placeholder="Select languages...">
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="rb">Ruby</option>
  <option value="go">Go</option>
  <option value="rs">Rust</option>
  <option value="java">Java</option>
  <option value="cs">C#</option>
  <option value="php">PHP</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 multiple data-placeholder="Select languages...">
      <option value="js">JavaScript</option>
      <option value="py">Python</option>
      <option value="rb">Ruby</option>
      <option value="go">Go</option>
      <option value="rs">Rust</option>
      <option value="java">Java</option>
      <option value="cs">C#</option>
      <option value="php">PHP</option>
    </select>
  )
}

<template>
  <select data-dot-select multiple data-placeholder="Select languages...">
    <option value="js">JavaScript</option>
    <option value="py">Python</option>
    <option value="rb">Ruby</option>
    <option value="go">Go</option>
    <option value="rs">Rust</option>
    <option value="java">Java</option>
    <option value="cs">C#</option>
    <option value="php">PHP</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>

With Remove Buttons

Add remove buttons to individual items:

<select data-dot-select data-plugins="remove-button" multiple data-placeholder="Select skills...">
  <option value="html" selected>HTML</option>
  <option value="css" selected>CSS</option>
  <option value="js" selected>JavaScript</option>
  <option value="react">React</option>
  <option value="vue">Vue</option>
  <option value="angular">Angular</option>
  <option value="svelte">Svelte</option>
  <option value="node">Node.js</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 skills...">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js" selected>JavaScript</option>
      <option value="react">React</option>
      <option value="vue">Vue</option>
      <option value="angular">Angular</option>
      <option value="svelte">Svelte</option>
      <option value="node">Node.js</option>
    </select>
  )
}

<template>
  <select data-dot-select data-plugins="remove-button" multiple data-placeholder="Select skills...">
    <option value="html" selected>HTML</option>
    <option value="css" selected>CSS</option>
    <option value="js" selected>JavaScript</option>
    <option value="react">React</option>
    <option value="vue">Vue</option>
    <option value="angular">Angular</option>
    <option value="svelte">Svelte</option>
    <option value="node">Node.js</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>

Limited Selections

Restrict the number of items a user can select:

<select
  data-dot-select
  data-plugins="remove-button"
  multiple
  data-max-items="3"
  data-placeholder="Pick up to 3 colors..."
>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="yellow">Yellow</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="indigo">Indigo</option>
  <option value="violet">Violet</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-max-items="3"
      data-placeholder="Pick up to 3 colors..."
    >
      <option value="red">Red</option>
      <option value="orange">Orange</option>
      <option value="yellow">Yellow</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="indigo">Indigo</option>
      <option value="violet">Violet</option>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-plugins="remove-button"
    multiple
    data-max-items="3"
    data-placeholder="Pick up to 3 colors..."
  >
    <option value="red">Red</option>
    <option value="orange">Orange</option>
    <option value="yellow">Yellow</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="indigo">Indigo</option>
    <option value="violet">Violet</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>

TIP

When the maximum number of items is reached, the dropdown automatically closes and no more selections can be made until an item is removed.

Hide Selected Options

Remove already-selected options from the dropdown:

<select
  data-dot-select
  data-plugins="remove-button"
  multiple
  data-hide-selected="true"
  data-searchable="true"
  data-placeholder="Select team members..."
>
  <option value="alice">Alice Johnson</option>
  <option value="bob">Bob Smith</option>
  <option value="carol">Carol Williams</option>
  <option value="david">David Brown</option>
  <option value="eve">Eve Davis</option>
  <option value="frank">Frank Miller</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-hide-selected="true"
      data-searchable="true"
      data-placeholder="Select team members..."
    >
      <option value="alice">Alice Johnson</option>
      <option value="bob">Bob Smith</option>
      <option value="carol">Carol Williams</option>
      <option value="david">David Brown</option>
      <option value="eve">Eve Davis</option>
      <option value="frank">Frank Miller</option>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-plugins="remove-button"
    multiple
    data-hide-selected="true"
    data-searchable="true"
    data-placeholder="Select team members..."
  >
    <option value="alice">Alice Johnson</option>
    <option value="bob">Bob Smith</option>
    <option value="carol">Carol Williams</option>
    <option value="david">David Brown</option>
    <option value="eve">Eve Davis</option>
    <option value="frank">Frank Miller</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>

Checkbox Style

Use the checkbox-options plugin for a checklist experience:

<select
  data-dot-select
  data-plugins="checkbox-options"
  multiple
  data-close-on-select="false"
  data-searchable="true"
  data-placeholder="Select permissions..."
>
  <optgroup label="Users">
    <option value="users.read">View Users</option>
    <option value="users.write">Edit Users</option>
    <option value="users.delete">Delete Users</option>
  </optgroup>
  <optgroup label="Posts">
    <option value="posts.read">View Posts</option>
    <option value="posts.write">Edit Posts</option>
    <option value="posts.delete">Delete Posts</option>
  </optgroup>
  <optgroup label="Settings">
    <option value="settings.read">View Settings</option>
    <option value="settings.write">Edit Settings</option>
  </optgroup>
</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="checkbox-options"
      multiple
      data-close-on-select="false"
      data-searchable="true"
      data-placeholder="Select permissions..."
    >
      <optgroup label="Users">
        <option value="users.read">View Users</option>
        <option value="users.write">Edit Users</option>
        <option value="users.delete">Delete Users</option>
      </optgroup>
      <optgroup label="Posts">
        <option value="posts.read">View Posts</option>
        <option value="posts.write">Edit Posts</option>
        <option value="posts.delete">Delete Posts</option>
      </optgroup>
      <optgroup label="Settings">
        <option value="settings.read">View Settings</option>
        <option value="settings.write">Edit Settings</option>
      </optgroup>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-plugins="checkbox-options"
    multiple
    data-close-on-select="false"
    data-searchable="true"
    data-placeholder="Select permissions..."
  >
    <optgroup label="Users">
      <option value="users.read">View Users</option>
      <option value="users.write">Edit Users</option>
      <option value="users.delete">Delete Users</option>
    </optgroup>
    <optgroup label="Posts">
      <option value="posts.read">View Posts</option>
      <option value="posts.write">Edit Posts</option>
      <option value="posts.delete">Delete Posts</option>
    </optgroup>
    <optgroup label="Settings">
      <option value="settings.read">View Settings</option>
      <option value="settings.write">Edit Settings</option>
    </optgroup>
  </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>

With Clear All Button

Add a button to clear all selections at once:

<select
  data-dot-select
  data-plugins="remove-button,clear-button"
  multiple
  data-searchable="true"
  data-placeholder="Select tags..."
>
  <option value="bug" selected>Bug</option>
  <option value="feature" selected>Feature</option>
  <option value="enhancement" selected>Enhancement</option>
  <option value="docs">Documentation</option>
  <option value="question">Question</option>
  <option value="wontfix">Won't Fix</option>
  <option value="duplicate">Duplicate</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-searchable="true"
      data-placeholder="Select tags..."
    >
      <option value="bug" selected>Bug</option>
      <option value="feature" selected>Feature</option>
      <option value="enhancement" selected>Enhancement</option>
      <option value="docs">Documentation</option>
      <option value="question">Question</option>
      <option value="wontfix">Won't Fix</option>
      <option value="duplicate">Duplicate</option>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-plugins="remove-button,clear-button"
    multiple
    data-searchable="true"
    data-placeholder="Select tags..."
  >
    <option value="bug" selected>Bug</option>
    <option value="feature" selected>Feature</option>
    <option value="enhancement" selected>Enhancement</option>
    <option value="docs">Documentation</option>
    <option value="question">Question</option>
    <option value="wontfix">Won't Fix</option>
    <option value="duplicate">Duplicate</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>

Drag and Drop Reordering

Allow users to reorder their selections:

<select
  data-dot-select
  data-plugins="drag-drop,remove-button"
  multiple
  data-placeholder="Select and reorder priorities..."
>
  <option value="security" selected>Security Patch</option>
  <option value="performance" selected>Performance Fix</option>
  <option value="feature" selected>New Feature</option>
  <option value="refactor">Refactor</option>
  <option value="tests">Test Coverage</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="drag-drop,remove-button"
      multiple
      data-placeholder="Select and reorder priorities..."
    >
      <option value="security" selected>Security Patch</option>
      <option value="performance" selected>Performance Fix</option>
      <option value="feature" selected>New Feature</option>
      <option value="refactor">Refactor</option>
      <option value="tests">Test Coverage</option>
      <option value="docs">Documentation</option>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-plugins="drag-drop,remove-button"
    multiple
    data-placeholder="Select and reorder priorities..."
  >
    <option value="security" selected>Security Patch</option>
    <option value="performance" selected>Performance Fix</option>
    <option value="feature" selected>New Feature</option>
    <option value="refactor">Refactor</option>
    <option value="tests">Test Coverage</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>

Full-Featured Multiple Select

Combining all features:

<select
  data-dot-select
  data-plugins="remove-button,clear-button,checkbox-options"
  multiple
  data-searchable="true"
  data-close-on-select="false"
  data-hide-selected="false"
  data-max-items="5"
  data-allow-clear="true"
  data-size="lg"
  data-placeholder="Select up to 5 technologies..."
  data-no-results-text="No matching technologies"
>
  <optgroup label="Frontend">
    <option value="react">React</option>
    <option value="vue">Vue.js</option>
    <option value="angular">Angular</option>
    <option value="svelte">Svelte</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="node">Node.js</option>
    <option value="django">Django</option>
    <option value="rails">Ruby on Rails</option>
    <option value="laravel">Laravel</option>
  </optgroup>
  <optgroup label="Database">
    <option value="postgres">PostgreSQL</option>
    <option value="mysql">MySQL</option>
    <option value="mongo">MongoDB</option>
    <option value="redis">Redis</option>
  </optgroup>
</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,checkbox-options"
      multiple
      data-searchable="true"
      data-close-on-select="false"
      data-hide-selected="false"
      data-max-items="5"
      data-allow-clear="true"
      data-size="lg"
      data-placeholder="Select up to 5 technologies..."
      data-no-results-text="No matching technologies"
    >
      <optgroup label="Frontend">
        <option value="react">React</option>
        <option value="vue">Vue.js</option>
        <option value="angular">Angular</option>
        <option value="svelte">Svelte</option>
      </optgroup>
      <optgroup label="Backend">
        <option value="node">Node.js</option>
        <option value="django">Django</option>
        <option value="rails">Ruby on Rails</option>
        <option value="laravel">Laravel</option>
      </optgroup>
      <optgroup label="Database">
        <option value="postgres">PostgreSQL</option>
        <option value="mysql">MySQL</option>
        <option value="mongo">MongoDB</option>
        <option value="redis">Redis</option>
      </optgroup>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-plugins="remove-button,clear-button,checkbox-options"
    multiple
    data-searchable="true"
    data-close-on-select="false"
    data-hide-selected="false"
    data-max-items="5"
    data-allow-clear="true"
    data-size="lg"
    data-placeholder="Select up to 5 technologies..."
    data-no-results-text="No matching technologies"
  >
    <optgroup label="Frontend">
      <option value="react">React</option>
      <option value="vue">Vue.js</option>
      <option value="angular">Angular</option>
      <option value="svelte">Svelte</option>
    </optgroup>
    <optgroup label="Backend">
      <option value="node">Node.js</option>
      <option value="django">Django</option>
      <option value="rails">Ruby on Rails</option>
      <option value="laravel">Laravel</option>
    </optgroup>
    <optgroup label="Database">
      <option value="postgres">PostgreSQL</option>
      <option value="mysql">MySQL</option>
      <option value="mongo">MongoDB</option>
      <option value="redis">Redis</option>
    </optgroup>
  </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>