Overview

The TagBox allows users to select multiple items from a drop-down list. This demo illustrates the following TagBox properties:

items
An array of items displayed by the TagBox.
searchEnabled
Specifies whether the search is enabled.
showSelectionControls
Defines whether to display the selection controls.
applyValueMode
Specifies whether selected values are applied instantly or when a user clicks the OK button.
hideSelectedItems
Specifies whether the selected items are removed from the drop-down list.
multiline
Displays selected items on single or multiple lines.
acceptCustomValue
Specifies whether users can enter custom values. Requires that you also implement the onCustomItemCreating handler.
placeholder
Customizes the TagBox placeholder.
value
Specifies items the TagBox currently displays.
disabled
Defines whether the component responds to user interaction.
dataSource
Binds the TagBox to data. Unlike the items property, dataSource accepts the DataSource object that allows users to sort, filter, group, and shape data. Note that you cannot use items and dataSource simultaneously.
itemTemplate
Allows you to customize the drop-down list items.

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

See more Hide details

Prev Demo Next Demo

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.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

$(() => { $('#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}' /><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, }); 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"> <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=1.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/23.1.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/23.1.5/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; }

Overview

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC