DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

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.
Backend API
$(() => { $('#productsSimple').dxTagBox({ items: simpleProducts, inputAttr: productLabel, }); $('#productsSearch').dxTagBox({ items: simpleProducts, searchEnabled: true, inputAttr: productLabel, }); $('#productsSelection').dxTagBox({ items: simpleProducts, showSelectionControls: true, applyValueMode: 'useButtons', inputAttr: productLabel, }); $('#productsHide').dxTagBox({ items: simpleProducts, hideSelectedItems: true, inputAttr: productLabel, }); $('#productsLine').dxTagBox({ items: simpleProducts, multiline: false, inputAttr: productLabel, }); $('#productsEdit').dxTagBox({ items: simpleProducts, acceptCustomValue: true, inputAttr: productLabel, onCustomItemCreating(args) { const newValue = args.text; const { component } = args; const currentItems = component.option('items'); const isItemInDataSource = currentItems.some((item) => item === newValue); if (!isItemInDataSource) { currentItems.unshift(newValue); component.option('items', currentItems); } args.customItem = newValue; }, }); $('#productsPlaceholder').dxTagBox({ items: simpleProducts, placeholder: 'Choose Product...', inputAttr: productLabel, }); $('#productsDisabled').dxTagBox({ items: simpleProducts, value: [simpleProducts[0]], disabled: true, inputAttr: productLabel, }); $('#productsDataSource').dxTagBox({ dataSource: new DevExpress.data.ArrayStore({ data: products, key: 'ID', }), displayExpr: 'Name', valueExpr: 'ID', inputAttr: productLabel, }); let product = null; const popoverContentTemplate = function () { return $('<div>').append( $(`<p><b>Name: </b><span>${product.Name}</span></p>`), $(`<p><b>Price: </b><span>$${product.Price}</span></p>`), $(`<p><b>In-stock: </b><span>${product.Current_Inventory}</span></p>`), $(`<p><b>Category: </b><span>${product.Category}</span></p>`), ); }; const popover = $('#popover').dxPopover({}).dxPopover('instance'); $('#productsCustom').dxTagBox({ dataSource: products, value: [1, 2], displayExpr: 'Name', valueExpr: 'ID', inputAttr: productLabel, itemTemplate(data) { return ` <div class='custom-item'> <img src='${data.ImageSrc}' alt='${data.Name}. Picture' /> <div class='product-name'>${data.Name}</div> </div> `; }, tagTemplate(data) { const isDisabled = data.Name === 'SuperHD Video Player'; const tagImg = $('<img>', { class: 'tag-img' }).attr({ src: data.ImageSrc, alt: `${data.Name}. Picture`, }); const tag = $('<div>') .attr('aria-disabled', isDisabled) .addClass(`dx-tag-content ${isDisabled && 'disabled-tag'}`) .append( tagImg, $('<span>').text(data.Name), !isDisabled && $('<div>').addClass('dx-tag-remove-button'), ); tag.on('dxhoverstart', (args) => { product = data; popover.option({ contentTemplate: () => popoverContentTemplate(), target: args.target.closest('.dx-tag'), }); popover.show(); }); tag.on('dxhoverend', () => { popover.hide(); }); return tag; }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.4/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="form"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Default mode</div> <div class="dx-field-value"> <div id="productsSimple"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Search mode</div> <div class="dx-field-value"> <div id="productsSearch"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Batch selection</div> <div class="dx-field-value"> <div id="productsSelection"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Hide selected items</div> <div class="dx-field-value"> <div id="productsHide"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Single line mode</div> <div class="dx-field-value"> <div id="productsLine"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Add custom items</div> <div class="dx-field-value"> <div id="productsEdit"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">With custom placeholder</div> <div class="dx-field-value"> <div id="productsPlaceholder"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> <div id="productsDisabled"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Data source</div> <div class="dx-field-value"> <div id="productsDataSource"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom template</div> <div class="dx-field-value"> <div id="productsCustom"></div> <div id="popover"></div> </div> </div> </div> </div> </div> </body> </html>
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; } #productsCustom .dx-tag-content { display: flex; align-items: center; } #productsCustom .tag-img { height: 30px; margin-right: 5px; } #productsCustom .dx-tag-content.disabled-tag { padding-right: 6px; opacity: 0.5; cursor: not-allowed; }
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', ]; 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', }]; const productLabel = { 'aria-label': 'Product' };

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.