Vue Tag Box - Overview

The TagBox component allows users to select multiple items from a drop-down list.

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the TagBox features used.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Default mode</div> <div class="dx-field-value"> <DxTagBox :items="simpleProducts" :input-attr="{ 'aria-label': 'Product' }" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Search mode</div> <div class="dx-field-value"> <DxTagBox :items="simpleProducts" :search-enabled="true" :input-attr="{ 'aria-label': 'Product' }" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Batch selection</div> <div class="dx-field-value"> <DxTagBox :items="simpleProducts" :show-selection-controls="true" :input-attr="{ 'aria-label': 'Product' }" apply-value-mode="useButtons" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Hide selected items</div> <div class="dx-field-value"> <DxTagBox :items="simpleProducts" :input-attr="{ 'aria-label': 'Product' }" :hide-selected-items="true" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Single line mode</div> <div class="dx-field-value"> <DxTagBox :items="simpleProducts" :input-attr="{ 'aria-label': 'Product' }" :multiline="false" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Add custom items</div> <div class="dx-field-value"> <DxTagBox :items="editableProducts" :accept-custom-value="true" :input-attr="{ 'aria-label': 'Product' }" @customItemCreating="onCustomItemCreating" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">With custom placeholder</div> <div class="dx-field-value"> <DxTagBox :items="simpleProducts" :input-attr="{ 'aria-label': 'Product' }" placeholder="Choose Product..." /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> <DxTagBox :items="simpleProducts" :input-attr="{ 'aria-label': 'Product' }" :value="[simpleProducts[0]]" :disabled="true" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Data source</div> <div class="dx-field-value"> <DxTagBox :data-source="products" :input-attr="{ 'aria-label': 'Product' }" display-expr="Name" value-expr="Id" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom template</div> <div class="dx-field-value"> <DxTagBox :data-source="products" :value="value" :input-attr="{ 'aria-label': 'Product' }" display-expr="Name" value-expr="Id" item-template="item" tag-template="tag" > <template #item="{ data }"> <Item :item-data="data"/> </template> <template #tag="{ data }"> <Tag :tag-data="data"/> </template> </DxTagBox> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxTagBox from 'devextreme-vue/tag-box'; import Item from './Item.vue'; import Tag from './Tag.vue'; import { simpleProducts, products } from './data.ts'; const editableProducts = ref(simpleProducts.slice()); const value = ref([1, 2]); const onCustomItemCreating = ref((args) => { const newValue = args.text; const isItemInDataSource = editableProducts.value.some((item) => item === newValue); if (!isItemInDataSource) { editableProducts.value = [newValue, ...editableProducts.value]; } args.customItem = newValue; }); </script> <style scoped> body .custom-item { padding-left: 7px; padding-right: 7px; } .custom-item > img { height: 30px; width: 40px; float: left; margin-top: 2px; } .custom-item > div.product-name { margin-left: 40px; line-height: 34px; font-size: 14px; } body .custom-item input { background-color: transparent; } body .dx-popup-content .custom-item { padding-top: 7px; padding-bottom: 8px; } .dx-popup-content .custom-item > div { padding-left: 8px; text-indent: 0; text-overflow: ellipsis; overflow: hidden; } </style>

<template> <div class="custom-item"> <img :src="itemData.ImageSrc" :alt="`${itemData.Name}. Picture`" > <div class="product-name"> {{ itemData.Name }} </div> </div> </template> <script setup lang="ts"> withDefaults(defineProps<{ itemData?: {[key:string]: string} }>(), { itemData: () => ({ Name: '' }), }); </script>

<template> <div> <div ref="target" :class="{'dx-tag-content': true, 'disabled-tag': isDisabled}" :aria-disabled="isDisabled" @mouseenter="show = true" @mouseleave="show = false" > <img :src="tagData.ImageSrc" :alt="`${tagData.Name}. Picture`" class="tag-img" > <span>{{ tagData.Name }}</span> <div v-if="!isDisabled" class="dx-tag-remove-button" /> </div> <DxPopover :visible="show" :target="target" > <p> <b>Name: </b><span>{{ tagData.Name }}</span> </p> <p> <b>Price: </b><span>{{ tagData.Price }}</span> </p> <p> <b>In-stock: </b><span>{{ tagData.Current_Inventory }}</span> </p> <p> <b>Category: </b><span>{{ tagData.Category }}</span> </p> </DxPopover> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxPopover from 'devextreme-vue/popover'; type TagData = Record<string, string>; const props = withDefaults(defineProps<{ tagData?: TagData }>(), { tagData: () => ({} as TagData), }); const isDisabled = ref(props.tagData.Name === 'SuperHD Video Player'); const show = ref(false); const target = ref(null); </script> <style scoped> .dx-tag-content { display: flex; align-items: center; } .tag-img { height: 30px; margin-right: 5px; } .dx-tag-content.disabled-tag { padding-right: 6px; opacity: 0.5; cursor: not-allowed; } </style>

export const simpleProducts = [ 'HD Video Player', 'SuperHD Video Player', 'SuperPlasma 50', 'SuperLED 50', 'SuperLED 42', 'SuperLCD 55', 'SuperLCD 42', 'SuperPlasma 65', 'SuperLCD 70', 'Projector Plus', 'Projector PlusHT', 'ExcelRemote IR', 'ExcelRemote Bluetooth', 'ExcelRemote IP', ]; export const products = [{ Id: 1, Name: 'HD Video Player', Price: 330, Current_Inventory: 225, Backorder: 0, Manufacturing: 10, Category: 'Video Players', ImageSrc: '../../../../images/products/1.png', }, { Id: 2, Name: 'SuperHD Video Player', Price: 400, Current_Inventory: 150, Backorder: 0, Manufacturing: 25, Category: 'Video Players', ImageSrc: '../../../../images/products/2.png', }, { Id: 3, Name: 'SuperPlasma 50', Price: 2400, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/3.png', }, { Id: 4, Name: 'SuperLED 50', Price: 1600, Current_Inventory: 77, Backorder: 0, Manufacturing: 55, Category: 'Televisions', ImageSrc: '../../../../images/products/4.png', }, { Id: 5, Name: 'SuperLED 42', Price: 1450, Current_Inventory: 445, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/5.png', }, { Id: 6, Name: 'SuperLCD 55', Price: 1350, Current_Inventory: 345, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: '../../../../images/products/6.png', }, { Id: 7, Name: 'SuperLCD 42', Price: 1200, Current_Inventory: 210, Backorder: 0, Manufacturing: 20, Category: 'Televisions', ImageSrc: '../../../../images/products/7.png', }, { Id: 8, Name: 'SuperPlasma 65', Price: 3500, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/8.png', }, { Id: 9, Name: 'SuperLCD 70', Price: 4000, Current_Inventory: 95, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: '../../../../images/products/9.png', }, { Id: 10, Name: 'DesktopLED 21', Price: 175, Current_Inventory: null, Backorder: 425, Manufacturing: 75, Category: 'Monitors', ImageSrc: '../../../../images/products/10.png', }, { Id: 12, Name: 'DesktopLCD 21', Price: 170, Current_Inventory: 210, Backorder: 0, Manufacturing: 60, Category: 'Monitors', ImageSrc: '../../../../images/products/12.png', }, { Id: 13, Name: 'DesktopLCD 19', Price: 160, Current_Inventory: 150, Backorder: 0, Manufacturing: 210, Category: 'Monitors', ImageSrc: '../../../../images/products/13.png', }, { Id: 14, Name: 'Projector Plus', Price: 550, Current_Inventory: null, Backorder: 55, Manufacturing: 10, Category: 'Projectors', ImageSrc: '../../../../images/products/14.png', }, { Id: 15, Name: 'Projector PlusHD', Price: 750, Current_Inventory: 110, Backorder: 0, Manufacturing: 90, Category: 'Projectors', ImageSrc: '../../../../images/products/15.png', }, { Id: 16, Name: 'Projector PlusHT', Price: 1050, Current_Inventory: 0, Backorder: 75, Manufacturing: 57, Category: 'Projectors', ImageSrc: '../../../../images/products/16.png', }, { Id: 17, Name: 'ExcelRemote IR', Price: 150, Current_Inventory: 650, Backorder: 0, Manufacturing: 190, Category: 'Automation', ImageSrc: '../../../../images/products/17.png', }, { Id: 18, Name: 'ExcelRemote Bluetooth', Price: 180, Current_Inventory: 310, Backorder: 0, Manufacturing: 0, Category: 'Automation', ImageSrc: '../../../../images/products/18.png', }, { Id: 19, Name: 'ExcelRemote IP', Price: 200, Current_Inventory: 0, Backorder: 325, Manufacturing: 225, Category: 'Automation', ImageSrc: '../../../../images/products/19.png', }];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

This demo illustrates the following TagBox properties:

items
An array of items to display in the drop-down list. Do not use the items property and the dataSource property in the same configuration.
dataSource
Binds the TagBox to a data source, which allows you to perform complex data operations. Do not use the dataSource property and the items property in the same configuration.
searchEnabled
Enables interactive item search.
showSelectionControls
Enables item selection controls.
applyValueMode
Specifies whether TagBox applies the selection instantly or after a confirmation.
hideSelectedItems
Specifies whether TagBox removes selected items from the drop-down list.
multiline
Specifies whether TagBox enables horizontal scrolling when the input field cannot fit all selected items.
acceptCustomValue
Allows users to enter custom values. To enable this capability, implement the onCustomItemCreating handler.
placeholder
Sets the value of the placeholder string.
value
Specifies the list of currently selected items.
disabled
Specifies whether the component responds to user interaction.
itemTemplate
Allows you to customize the appearance and content of list items.
tagTemplate Allows you to customize the appearance and content of list item tooltips.

To get started with the DevExtreme TagBox component, refer to the following tutorial for step-by-step instructions: Getting Started with TagBox.