Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Tag Box

    Overview

    Documentation

    The TagBox UI component is an editor that allows an end user to select multiple items from a drop-down list.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Copy to CodePen
    Apply
    Reset
    var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.editableProducts = simpleProducts.slice(); $scope.tagBox = { simple: { items: simpleProducts }, searchOptions: { items: simpleProducts, searchEnabled: true }, selectionOptions: { items: simpleProducts, showSelectionControls: true, applyValueMode: "useButtons" }, hideOptions: { items: simpleProducts, hideSelectedItems: true }, lineOptions: { items: simpleProducts, multiline: false }, fieldEditOptions: { acceptCustomValue: true, bindingOptions: { items: "editableProducts" }, onCustomItemCreating: function(args) { var newValue = args.text; $scope.editableProducts.unshift(newValue); args.customItem = newValue; } }, withCustomPlaceholder: { items: simpleProducts, placeholder: "Choose Product..." }, disabled: { items: simpleProducts, value: [simpleProducts[0]], disabled: true }, dataSourceUsage: { dataSource: new DevExpress.data.ArrayStore({ data: products, key: "ID" }), displayExpr: "Name", valueExpr: "ID", }, customTemplate: { dataSource: products, displayExpr: "Name", valueExpr: "ID", itemTemplate: "customItem" } }; });
    <!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/20.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/20.2.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" ng-app="DemoApp" ng-controller="DemoController"> <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 dx-tag-box="tagBox.simple"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Search mode</div> <div class="dx-field-value"> <div dx-tag-box="tagBox.searchOptions"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Batch selection</div> <div class="dx-field-value"> <div dx-tag-box="tagBox.selectionOptions"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Hide selected items</div> <div class="dx-field-value"> <div dx-tag-box="tagBox.hideOptions"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Single line mode</div> <div class="dx-field-value"> <div dx-tag-box="tagBox.lineOptions"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Add custom items</div> <div class="dx-field-value"> <div dx-tag-box="tagBox.fieldEditOptions"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">With custom placeholder</div> <div class="dx-field-value"> <div dx-tag-box="tagBox.withCustomPlaceholder"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> <div dx-tag-box="tagBox.disabled"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Data source</div> <div class="dx-field-value"> <div dx-tag-box="tagBox.dataSourceUsage"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom template</div> <div class="dx-field-value"> <div dx-tag-box="tagBox.customTemplate" dx-item-alias="product"> <div data-options="dxTemplate: { name: 'customItem' }"> <div class="custom-item"> <img ng-src="{{product.ImageSrc}}"/> <div class="product-name"> {{product.Name}} </div> </div> </div> </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; }
    var 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" ]; var 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" }];