Choices-Vue3

💡 A lightweight and flexible Vue 2 & Vue 3 wrapper for Choices.js, fully compatible with Bootstrap 5 and written in TypeScript. Supports CDN and bundled usage, v-model binding, custom events, async search, and multiple selection modes — all without relying on jQuery.

---

🖼️ Preview

---

🧪 Demo & Playground

🔗 Try at JSFiddle

🚀 Install

With npm (recommended)

1npm install choices-vue3

With CDN

1<link href="https://cdn.jsdelivr.net/npm/choices-vue3@1.0.0/dist/choices-vue3.css" rel="stylesheet" />
2<script src="https://cdn.jsdelivr.net/npm/choices-vue3@1.0.0/dist/choices-vue3.min.js"></script>

🧩 Usage

Basic usage (npm / bundler)

1import { createApp } from 'vue'
2import './style.css'
3import App from './App.vue'
4import { useChoices } from 'choices-vue3'
5import 'choices-vue3/dist/vue3/choices-vue3.css'
6
7const app = createApp(App)
8
9app.use(useChoices)
10app.mount('#app')

as a component? Or for TypeScript when build (Tested in Vite when using npm run build):

1import { createApp } from 'vue'
2import './style.css'
3import App from './App.vue'
4import { ChoicesVue3 } from 'choices-vue3/vue3' or import ChoicesVue3 from 'choices-vue3/vue3'
5import 'choices-vue3/dist/vue3/choices-vue3.css'
6
7const app = createApp(App)
8
9app.component('choices-vue3', ChoicesVue3)
10app.mount('#app')

Now use in your any components:

As Single Select (Default)

1<template>
2  <choices-vue3
3    v-model="selectedValue"
4    :options="selectOptions"
5    @change="handleChange"
6    class="mb-2"
7    :placeholder="'Select an option'"
8  ></choices-vue3>
9</template>
10
11<script setup>
12import { ref } from 'vue'
13
14const selectedValue = ref(null)
15const selectOptions = ref([
16  { value: '1a2b3c4d', label: 'Admin - Budi Santoso' },
17  { value: '2b3c4d5e', label: 'Marketing - Siti Aminah' },
18  { value: '3c4d5e6f', label: 'Developer - Agus Wijaya' },
19  { value: '4d5e6f7g', label: 'HR - Indah Permata' },
20  { value: '5e6f7g8h', label: 'Finance - Rudi Hartono' },
21  { value: '6f7g8h9i', label: 'QA - Tono Supriyadi' },
22  { value: '7g8h9i0j', label: 'Design - Sarah Maharani' },
23  { value: '8h9i0j1k', label: 'Support - Dimas Ananta' },
24  { value: '9i0j1k2l', label: 'PM - Citra Larasati' },
25  { value: '0j1k2l3m', label: 'Intern - Yoga Pranata' },
26])
27</script>

Or you can use TypeScript:

1<template>
2  <choices-vue3
3    v-model="selectedValue"
4    :options="selectOptions"
5    @change="handleChange"
6    class="mb-2"
7    :placeholder="'Select an option'"
8  ></choices-vue3>
9/>
10</template>
11
12<script lang="ts">
13import { defineComponent, ref } from 'vue'
14
15export default defineComponent({
16  name: 'HelloWorld',
17  setup() {
18    const selectedValue = ref('')
19    const selectOptions = ref([
20      { value: '1a2b3c4d', label: 'Admin - Budi Santoso' },
21      { value: '2b3c4d5e', label: 'Marketing - Siti Aminah' },
22      { value: '3c4d5e6f', label: 'Developer - Agus Wijaya' },
23      { value: '4d5e6f7g', label: 'HR - Indah Permata' },
24      { value: '5e6f7g8h', label: 'Finance - Rudi Hartono' },
25      { value: '6f7g8h9i', label: 'QA - Tono Supriyadi' },
26      { value: '7g8h9i0j', label: 'Design - Sarah Maharani' },
27      { value: '8h9i0j1k', label: 'Support - Dimas Ananta' },
28      { value: '9i0j1k2l', label: 'PM - Citra Larasati' },
29      { value: '0j1k2l3m', label: 'Intern - Yoga Pranata' },
30    ])
31
32    return {
33      selectedValue,
34      selectOptions,
35    }
36  }
37})
38</script>

As Multiple Select

1<template>
2  <choices-vue3
3    v-model="selectedValue"
4    :options="selectOptions"
5    @change="handleChange"
6    class="mb-2"
7    :placeholder="'Select an option'"
8    :config="{ mode: 'multiple', delimiter: ',', removeItemButton: true, removeItems: true, setting: { returnObject: false }}"
9    :multiple="true"
10  ></choices-vue3>
11</template>
12
13<script setup>
14import { ref } from 'vue'
15
16const selectedValue = ref(null)
17const selectOptions = ref([
18  { value: '1a2b3c4d', label: 'Admin - Budi Santoso' },
19  { value: '2b3c4d5e', label: 'Marketing - Siti Aminah' },
20  { value: '3c4d5e6f', label: 'Developer - Agus Wijaya' },
21  { value: '4d5e6f7g', label: 'HR - Indah Permata' },
22  { value: '5e6f7g8h', label: 'Finance - Rudi Hartono' },
23  { value: '6f7g8h9i', label: 'QA - Tono Supriyadi' },
24  { value: '7g8h9i0j', label: 'Design - Sarah Maharani' },
25  { value: '8h9i0j1k', label: 'Support - Dimas Ananta' },
26  { value: '9i0j1k2l', label: 'PM - Citra Larasati' },
27  { value: '0j1k2l3m', label: 'Intern - Yoga Pranata' },
28])
29</script>

Or you can use TypeScript:

1<template>
2  <choices-vue3
3    v-model="selectedValue"
4    :options="selectOptions"
5    @change="handleChange"
6    class="mb-2"
7    :placeholder="'Select an option'"
8    :config="{ mode: 'multiple', delimiter: ',', removeItemButton: true, removeItems: true, setting: { returnObject: true }}"
9    :multiple="true"
10  ></choices-vue3>
11/>
12</template>
13
14<script lang="ts">
15import { defineComponent, ref } from 'vue'
16
17export default defineComponent({
18  name: 'HelloWorld',
19  setup() {
20    const selectedValue = ref('')
21    const selectOptions = ref([
22      { value: '1a2b3c4d', label: 'Admin - Budi Santoso' },
23      { value: '2b3c4d5e', label: 'Marketing - Siti Aminah' },
24      { value: '3c4d5e6f', label: 'Developer - Agus Wijaya' },
25      { value: '4d5e6f7g', label: 'HR - Indah Permata' },
26      { value: '5e6f7g8h', label: 'Finance - Rudi Hartono' },
27      { value: '6f7g8h9i', label: 'QA - Tono Supriyadi' },
28      { value: '7g8h9i0j', label: 'Design - Sarah Maharani' },
29      { value: '8h9i0j1k', label: 'Support - Dimas Ananta' },
30      { value: '9i0j1k2l', label: 'PM - Citra Larasati' },
31      { value: '0j1k2l3m', label: 'Intern - Yoga Pranata' },
32    ])
33
34    return {
35      selectedValue,
36      selectOptions,
37    }
38  }
39})
40</script>

As Tagging

1<template>
2  <choices-vue3
3    v-model="selectedValue"
4    :options="selectOptions"
5    @change="handleChange"
6    class="mb-2"
7    :placeholder="'Select an option'"
8    :config="{ mode: 'tagging', delimiter: ',', removeItemButton: true, removeItems: true, setting: { returnObject: false }}"
9    :multiple="true"
10  ></choices-vue3>
11</template>
12
13<script setup>
14import { ref } from 'vue'
15
16const selectedValue = ref(null)
17const selectOptions = ref([])
18</script>

Or you can use TypeScript:

1<template>
2  <choices-vue3
3    v-model="selectedValue"
4    :options="selectOptions"
5    @change="handleChange"
6    class="mb-2"
7    :placeholder="'Select an option'"
8    :config="{ mode: 'tagging', delimiter: ',', removeItemButton: true, removeItems: true, setting: { returnObject: true }}"
9    :multiple="true"
10  ></choices-vue3>
11/>
12</template>
13
14<script lang="ts">
15import { defineComponent, ref } from 'vue'
16
17export default defineComponent({
18  name: 'HelloWorld',
19  setup() {
20    const selectedValue = ref(null)
21    const selectOptions = ref([])
22
23    return {
24      selectedValue,
25      selectOptions,
26    }
27  }
28})
29</script>

How to use the props?

Prop	Type	Default	Required	Description
id	String	'choices'	✘	The ID attribute for the main element
name	String	'choices'	✘	The name attribute for form input
options	Array	—	✔	List of available options
modelValue	String | Number | Array	null	✘	Selected value (used with v-model)
placeholder	String	'Select an option'	✘	Placeholder text when no option is selected
multiple	Boolean	false	✘	Enables multiple selection
disabled	Boolean	false	✘	Disables the component
required	Boolean	false	✘	Marks the field as required
valueKey	String	'value'	✘	Key used to extract value from option object
textKey	String	'label'	✘	Key used to extract display text from option object
config	Object	() => ({})	✘	Additional configuration options
fetchOnSearch	Boolean	false	✘	Emits search event on user input
loadingSelect	Boolean	undefined	✘	Shows loading indicator when true

Emits

Event	Payload	Description
update:modelValue	String | Number | Array	Emitted when the selected value changes
change	Selected option(s)	Emitted when an option is selected
search	String	Emitted when the user types in the input field
loadMore	—	Emitted to load more data (e.g., for infinite scrolling)

📘 Configuration Notes

The config prop allows you to customize the behavior of the select component. Below are the guidelines for using it in different modes:

---

🔹 Single Select

• You do not need to set multiple.
• The config prop is optional.
• Example (with optional features enabled):

1<MySelect
2  :config="{
3    removeItemButton: true,
4    removeItems: true,
5    setting: { returnObject: false }
6  }"
7/>

---

🔸 Multiple Select

• You must set multiple to true.
• You must provide a valid config with mode set to either 'multiple' or 'tagging'.

Example – Mode: 'multiple'

1<MySelect
2  multiple
3  :config="{
4    mode: 'multiple',
5    delimiter: ',',
6    removeItemButton: true,
7    removeItems: true,
8    setting: { returnObject: false }
9  }"
10/>

Example – Mode: 'tagging'

1<MySelect
2  multiple
3  :config="{
4    mode: 'tagging',
5    delimiter: ',',
6    removeItemButton: true,
7    removeItems: true,
8    setting: { returnObject: false }
9  }"
10/>

---

⚙️ About returnObject

Inside config.setting, the returnObject option controls what value gets emitted and bound via v-model:

Setting	Behavior
returnObject: false	Emits only the value from the selected item (based on valueKey).
returnObject: true	Emits the entire object of the selected item. Useful when you need access to more fields.

Example

1// Given options:
2[
3  { label: 'Apple', value: 'apple', category: 'fruit' },
4  { label: 'Carrot', value: 'carrot', category: 'vegetable' }
5]
6
7// With returnObject: false
8modelValue === 'apple'
9
10// With returnObject: true
11modelValue === { label: 'Apple', value: 'apple', category: 'fruit' }

Make sure you choose the returnObject behavior based on whether your app needs only the value or the entire item object.

---

🚀 About Me

I'm a full stack developer...

Authors

• @ryuhiro