{"id":51658274,"url":"https://github.com/ryuhiro/choices-vue3","last_synced_at":"2026-07-14T13:00:13.195Z","repository":{"id":304524470,"uuid":"1019082262","full_name":"ryuhiro/choices-vue3","owner":"ryuhiro","description":"A lightweight and flexible Vue 2 \u0026 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.","archived":false,"fork":false,"pushed_at":"2025-07-13T17:42:19.000Z","size":65,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-07-14T12:59:55.655Z","etag":null,"topics":["choice","choices","choices-js","vite","vue","vue3","vuex"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryuhiro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-13T17:40:11.000Z","updated_at":"2026-01-04T22:42:04.000Z","dependencies_parsed_at":"2025-07-13T17:51:20.934Z","dependency_job_id":"ac5be9ac-0de6-4a17-8945-a0d85e3b2ffa","html_url":"https://github.com/ryuhiro/choices-vue3","commit_stats":null,"previous_names":["ryuhiro/choices-vue3"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ryuhiro/choices-vue3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryuhiro%2Fchoices-vue3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryuhiro%2Fchoices-vue3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryuhiro%2Fchoices-vue3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryuhiro%2Fchoices-vue3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryuhiro","download_url":"https://codeload.github.com/ryuhiro/choices-vue3/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryuhiro%2Fchoices-vue3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35462449,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-14T02:00:06.603Z","response_time":114,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["choice","choices","choices-js","vite","vue","vue3","vuex"],"created_at":"2026-07-14T13:00:12.356Z","updated_at":"2026-07-14T13:00:13.156Z","avatar_url":"https://github.com/ryuhiro.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Choices-Vue3\n\n[![npm version](https://img.shields.io/npm/v/choices-vue3.svg)](https://www.npmjs.com/package/choices-vue3) [![npm downloads](https://img.shields.io/npm/dm/choices-vue3.svg)](https://www.npmjs.com/package/choices-vue3) [![Vue 3 Compatible](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/) [![Types Included](https://img.shields.io/npm/types/choices-vue3.svg)](https://www.npmjs.com/package/choices-vue3) [![](https://data.jsdelivr.com/v1/package/npm/choices-vue3/badge?style=rounded)](https://www.jsdelivr.com/package/npm/choices-vue3)\n\n💡 A lightweight and flexible Vue 2 \u0026 Vue 3 wrapper for Choices.js, fully compatible with Bootstrap 5 and written in TypeScript.\nSupports CDN and bundled usage, v-model binding, custom events, async search, and multiple selection modes — all without relying on jQuery.\n\n\n---\n\n\n## 🖼️ Preview\n\n![Choices-Vue3 Preview](https://res.cloudinary.com/doftx5wrm/image/upload/v1752425173/demo_choice_pqvcab.jpeg)\n\n---\n\n\n\n## 🧪 Demo \u0026 Playground\n🔗 [Try at JSFiddle](https://jsfiddle.net/ryuhiro/xq82L7mn/7/)\n\n\n## 🚀 Install\n\n### With npm (recommended)\n\n```bash\nnpm install choices-vue3\n```\n\n### With CDN\n\n```bash\n\u003clink href=\"https://cdn.jsdelivr.net/npm/choices-vue3@1.0.0/dist/choices-vue3.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/choices-vue3@1.0.0/dist/choices-vue3.min.js\"\u003e\u003c/script\u003e\n```\n\n## 🧩 Usage\n\n### Basic usage (npm / bundler)\n```bash\nimport { createApp } from 'vue'\nimport './style.css'\nimport App from './App.vue'\nimport { useChoices } from 'choices-vue3'\nimport 'choices-vue3/dist/vue3/choices-vue3.css'\n\nconst app = createApp(App)\n\napp.use(useChoices)\napp.mount('#app')\n```\n\nas a component? Or for TypeScript when build (Tested in Vite when using `npm run build`):\n\n```bash\nimport { createApp } from 'vue'\nimport './style.css'\nimport App from './App.vue'\nimport { ChoicesVue3 } from 'choices-vue3/vue3' or import ChoicesVue3 from 'choices-vue3/vue3'\nimport 'choices-vue3/dist/vue3/choices-vue3.css'\n\nconst app = createApp(App)\n\napp.component('choices-vue3', ChoicesVue3)\napp.mount('#app')\n```\n\nNow use in your any components:\n\n## As Single Select (Default)\n```bash\n\u003ctemplate\u003e\n  \u003cchoices-vue3\n    v-model=\"selectedValue\"\n    :options=\"selectOptions\"\n    @change=\"handleChange\"\n    class=\"mb-2\"\n    :placeholder=\"'Select an option'\"\n  \u003e\u003c/choices-vue3\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue'\n\nconst selectedValue = ref(null)\nconst selectOptions = ref([\n  { value: '1a2b3c4d', label: 'Admin - Budi Santoso' },\n  { value: '2b3c4d5e', label: 'Marketing - Siti Aminah' },\n  { value: '3c4d5e6f', label: 'Developer - Agus Wijaya' },\n  { value: '4d5e6f7g', label: 'HR - Indah Permata' },\n  { value: '5e6f7g8h', label: 'Finance - Rudi Hartono' },\n  { value: '6f7g8h9i', label: 'QA - Tono Supriyadi' },\n  { value: '7g8h9i0j', label: 'Design - Sarah Maharani' },\n  { value: '8h9i0j1k', label: 'Support - Dimas Ananta' },\n  { value: '9i0j1k2l', label: 'PM - Citra Larasati' },\n  { value: '0j1k2l3m', label: 'Intern - Yoga Pranata' },\n])\n\u003c/script\u003e\n```\n\nOr you can use TypeScript:\n\n```bash\n\u003ctemplate\u003e\n  \u003cchoices-vue3\n    v-model=\"selectedValue\"\n    :options=\"selectOptions\"\n    @change=\"handleChange\"\n    class=\"mb-2\"\n    :placeholder=\"'Select an option'\"\n  \u003e\u003c/choices-vue3\u003e\n/\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'HelloWorld',\n  setup() {\n    const selectedValue = ref('')\n    const selectOptions = ref([\n      { value: '1a2b3c4d', label: 'Admin - Budi Santoso' },\n      { value: '2b3c4d5e', label: 'Marketing - Siti Aminah' },\n      { value: '3c4d5e6f', label: 'Developer - Agus Wijaya' },\n      { value: '4d5e6f7g', label: 'HR - Indah Permata' },\n      { value: '5e6f7g8h', label: 'Finance - Rudi Hartono' },\n      { value: '6f7g8h9i', label: 'QA - Tono Supriyadi' },\n      { value: '7g8h9i0j', label: 'Design - Sarah Maharani' },\n      { value: '8h9i0j1k', label: 'Support - Dimas Ananta' },\n      { value: '9i0j1k2l', label: 'PM - Citra Larasati' },\n      { value: '0j1k2l3m', label: 'Intern - Yoga Pranata' },\n    ])\n\n    return {\n      selectedValue,\n      selectOptions,\n    }\n  }\n})\n\u003c/script\u003e\n```\n\n\n## As Multiple Select\n```bash\n\u003ctemplate\u003e\n  \u003cchoices-vue3\n    v-model=\"selectedValue\"\n    :options=\"selectOptions\"\n    @change=\"handleChange\"\n    class=\"mb-2\"\n    :placeholder=\"'Select an option'\"\n    :config=\"{ mode: 'multiple', delimiter: ',', removeItemButton: true, removeItems: true, setting: { returnObject: false }}\"\n    :multiple=\"true\"\n  \u003e\u003c/choices-vue3\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue'\n\nconst selectedValue = ref(null)\nconst selectOptions = ref([\n  { value: '1a2b3c4d', label: 'Admin - Budi Santoso' },\n  { value: '2b3c4d5e', label: 'Marketing - Siti Aminah' },\n  { value: '3c4d5e6f', label: 'Developer - Agus Wijaya' },\n  { value: '4d5e6f7g', label: 'HR - Indah Permata' },\n  { value: '5e6f7g8h', label: 'Finance - Rudi Hartono' },\n  { value: '6f7g8h9i', label: 'QA - Tono Supriyadi' },\n  { value: '7g8h9i0j', label: 'Design - Sarah Maharani' },\n  { value: '8h9i0j1k', label: 'Support - Dimas Ananta' },\n  { value: '9i0j1k2l', label: 'PM - Citra Larasati' },\n  { value: '0j1k2l3m', label: 'Intern - Yoga Pranata' },\n])\n\u003c/script\u003e\n```\n\nOr you can use TypeScript:\n\n```bash\n\u003ctemplate\u003e\n  \u003cchoices-vue3\n    v-model=\"selectedValue\"\n    :options=\"selectOptions\"\n    @change=\"handleChange\"\n    class=\"mb-2\"\n    :placeholder=\"'Select an option'\"\n    :config=\"{ mode: 'multiple', delimiter: ',', removeItemButton: true, removeItems: true, setting: { returnObject: true }}\"\n    :multiple=\"true\"\n  \u003e\u003c/choices-vue3\u003e\n/\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'HelloWorld',\n  setup() {\n    const selectedValue = ref('')\n    const selectOptions = ref([\n      { value: '1a2b3c4d', label: 'Admin - Budi Santoso' },\n      { value: '2b3c4d5e', label: 'Marketing - Siti Aminah' },\n      { value: '3c4d5e6f', label: 'Developer - Agus Wijaya' },\n      { value: '4d5e6f7g', label: 'HR - Indah Permata' },\n      { value: '5e6f7g8h', label: 'Finance - Rudi Hartono' },\n      { value: '6f7g8h9i', label: 'QA - Tono Supriyadi' },\n      { value: '7g8h9i0j', label: 'Design - Sarah Maharani' },\n      { value: '8h9i0j1k', label: 'Support - Dimas Ananta' },\n      { value: '9i0j1k2l', label: 'PM - Citra Larasati' },\n      { value: '0j1k2l3m', label: 'Intern - Yoga Pranata' },\n    ])\n\n    return {\n      selectedValue,\n      selectOptions,\n    }\n  }\n})\n\u003c/script\u003e\n```\n\n## As Tagging\n```bash\n\u003ctemplate\u003e\n  \u003cchoices-vue3\n    v-model=\"selectedValue\"\n    :options=\"selectOptions\"\n    @change=\"handleChange\"\n    class=\"mb-2\"\n    :placeholder=\"'Select an option'\"\n    :config=\"{ mode: 'tagging', delimiter: ',', removeItemButton: true, removeItems: true, setting: { returnObject: false }}\"\n    :multiple=\"true\"\n  \u003e\u003c/choices-vue3\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue'\n\nconst selectedValue = ref(null)\nconst selectOptions = ref([])\n\u003c/script\u003e\n```\n\nOr you can use TypeScript:\n\n```bash\n\u003ctemplate\u003e\n  \u003cchoices-vue3\n    v-model=\"selectedValue\"\n    :options=\"selectOptions\"\n    @change=\"handleChange\"\n    class=\"mb-2\"\n    :placeholder=\"'Select an option'\"\n    :config=\"{ mode: 'tagging', delimiter: ',', removeItemButton: true, removeItems: true, setting: { returnObject: true }}\"\n    :multiple=\"true\"\n  \u003e\u003c/choices-vue3\u003e\n/\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'HelloWorld',\n  setup() {\n    const selectedValue = ref(null)\n    const selectOptions = ref([])\n\n    return {\n      selectedValue,\n      selectOptions,\n    }\n  }\n})\n\u003c/script\u003e\n```\n\n\n# How to use the props?\n\n| Prop            | Type                            | Default               | Required | Description                                          |\n|-----------------|---------------------------------|-----------------------|----------|------------------------------------------------------|\n| `id`            | `String`                        | `'choices'`           | ✘        | The ID attribute for the main element                |\n| `name`          | `String`                        | `'choices'`           | ✘        | The name attribute for form input                   |\n| `options`       | `Array`                         | —                     | ✔        | List of available options                           |\n| `modelValue`    | `String` \\| `Number` \\| `Array` | `null`                | ✘        | Selected value (used with `v-model`)                |\n| `placeholder`   | `String`                        | `'Select an option'`  | ✘        | Placeholder text when no option is selected         |\n| `multiple`      | `Boolean`                       | `false`               | ✘        | Enables multiple selection                          |\n| `disabled`      | `Boolean`                       | `false`               | ✘        | Disables the component                              |\n| `required`      | `Boolean`                       | `false`               | ✘        | Marks the field as required                         |\n| `valueKey`      | `String`                        | `'value'`             | ✘        | Key used to extract value from option object        |\n| `textKey`       | `String`                        | `'label'`             | ✘        | Key used to extract display text from option object |\n| `config`        | `Object`                        | `() =\u003e ({})`          | ✘        | Additional configuration options                    |\n| `fetchOnSearch` | `Boolean`                       | `false`               | ✘        | Emits `search` event on user input                  |\n| `loadingSelect` | `Boolean`                       | `undefined`           | ✘        | Shows loading indicator when true                   |\n\n# Emits\n\n| Event                | Payload                            | Description                                               |\n|----------------------|------------------------------------|-----------------------------------------------------------|\n| `update:modelValue`  | `String` \\| `Number` \\| `Array`    | Emitted when the selected value changes                   |\n| `change`             | Selected option(s)                 | Emitted when an option is selected                        |\n| `search`             | `String`                           | Emitted when the user types in the input field            |\n| `loadMore`           | —                                  | Emitted to load more data (e.g., for infinite scrolling)  |\n\n### 📘 Configuration Notes\n\nThe `config` prop allows you to customize the behavior of the select component. Below are the guidelines for using it in different modes:\n\n---\n\n#### 🔹 Single Select\n\n- You do **not** need to set `multiple`.\n- The `config` prop is **optional**.\n- Example (with optional features enabled):\n\n```bash\n\u003cMySelect\n  :config=\"{\n    removeItemButton: true,\n    removeItems: true,\n    setting: { returnObject: false }\n  }\"\n/\u003e\n```\n\n---\n\n#### 🔸 Multiple Select\n\n- You **must** set `multiple` to `true`.\n- You **must** provide a valid `config` with `mode` set to either `'multiple'` or `'tagging'`.\n\n##### Example – Mode: `'multiple'`\n\n```bash\n\u003cMySelect\n  multiple\n  :config=\"{\n    mode: 'multiple',\n    delimiter: ',',\n    removeItemButton: true,\n    removeItems: true,\n    setting: { returnObject: false }\n  }\"\n/\u003e\n```\n\n##### Example – Mode: `'tagging'`\n\n```bash\n\u003cMySelect\n  multiple\n  :config=\"{\n    mode: 'tagging',\n    delimiter: ',',\n    removeItemButton: true,\n    removeItems: true,\n    setting: { returnObject: false }\n  }\"\n/\u003e\n```\n\n---\n\n### ⚙️ About `returnObject`\n\nInside `config.setting`, the `returnObject` option controls what value gets emitted and bound via `v-model`:\n\n| Setting                | Behavior                                                                 |\n|------------------------|--------------------------------------------------------------------------|\n| `returnObject: false`  | Emits only the `value` from the selected item (based on `valueKey`).     |\n| `returnObject: true`   | Emits the **entire object** of the selected item. Useful when you need access to more fields. |\n\n##### Example\n```js\n// Given options:\n[\n  { label: 'Apple', value: 'apple', category: 'fruit' },\n  { label: 'Carrot', value: 'carrot', category: 'vegetable' }\n]\n\n// With returnObject: false\nmodelValue === 'apple'\n\n// With returnObject: true\nmodelValue === { label: 'Apple', value: 'apple', category: 'fruit' }\n```\n\nMake sure you choose the `returnObject` behavior based on whether your app needs only the value or the entire item object.\n\n---\n\n## 🚀 About Me\nI'm a full stack developer...\n\n\n## Authors\n\n- [@ryuhiro](https://www.github.com/ryuhiro)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryuhiro%2Fchoices-vue3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryuhiro%2Fchoices-vue3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryuhiro%2Fchoices-vue3/lists"}