Free Trial Buy
    Your search did not match any results.
    Tag Box

    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

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodeSandBox
    Apply
    Reset
    <div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Default mode</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts"></dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Search mode</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts" [searchEnabled]="true"> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Batch selection</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts" [showSelectionControls]="true" applyValueMode="useButtons" > </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Hide selected items</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts" [hideSelectedItems]="true"> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Single line mode</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts" [multiline]="false"> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Add custom items</div> <div class="dx-field-value"> <dx-tag-box [items]="editableProducts" [acceptCustomValue]="true" (onCustomItemCreating)="onCustomItemCreating($event)" > </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">With custom placeholder</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts" placeholder="Choose Product..."> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts" [value]="[simpleProducts[0]]" [disabled]="true" > </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Data source</div> <div class="dx-field-value"> <dx-tag-box [dataSource]="dataSource" displayExpr="Name" valueExpr="Id"> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom template</div> <div class="dx-field-value"> <dx-tag-box [dataSource]="dataSource" displayExpr="Name" valueExpr="Id" itemTemplate="customItem" > <div *dxTemplate="let product of 'customItem'"> <div class="custom-item"> <img [src]="product.ImageSrc" /> <div class="product-name"> {{ product.Name }} </div> </div> </div> </dx-tag-box> </div> </div> </div> </div>
    import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxTagBoxModule, DxTemplateModule } from 'devextreme-angular'; import ArrayStore from 'devextreme/data/array_store'; import { Service, Product } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], }) export class AppComponent { simpleProducts: string[]; editableProducts: string[]; dataSource: any; constructor(service: Service) { this.dataSource = new ArrayStore({ data: service.getProducts(), key: 'Id', }); this.simpleProducts = service.getSimpleProducts(); this.editableProducts = this.simpleProducts.slice(); } onCustomItemCreating(args) { const newValue = args.text; this.editableProducts.unshift(newValue); args.customItem = newValue; } } @NgModule({ imports: [ BrowserModule, DxTemplateModule, DxTagBoxModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
    body .custom-item { padding-left: 7px; padding-right: 7px; } ::ng-deep .custom-item > img { height: 30px; width: 40px; float: left; margin-top: 2px; } ::ng-deep .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; } ::ng-deep .dx-popup-content .custom-item > div { padding-left: 8px; text-indent: 0; text-overflow: ellipsis; overflow: hidden; }
    import { Injectable } from '@angular/core'; export class Product { Id: number; Name: string; Price: number; Current_Inventory: number; Backorder: number; Manufacturing: number; Category: string; ImageSrc: string; } 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: Product[] = [{ 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', }, ]; @Injectable() export class Service { getProducts(): Product[] { return products; } getSimpleProducts(): string[] { return simpleProducts; } }
    // In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.16', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.16', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.16', '@angular/forms': 'npm:@angular/forms@12.2.16', '@angular/common': 'npm:@angular/common@12.2.16', '@angular/compiler': 'npm:@angular/compiler@12.2.16', 'tslib': 'npm:tslib@2.3.1/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.1.6/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@22.1.6/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.18/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.65', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.33', 'devextreme-angular': 'npm:devextreme-angular@22.1.6', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', 'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.7.1/standalone.js', 'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.11/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common@12.2.16/*/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devextreme-angular@22.1.6/*/package.json', 'npm:devextreme-angular@22.1.6/ui/*/package.json', 'npm:devextreme-angular@22.1.6/package.json', 'npm:devexpress-diagram@2.1.65/package.json', 'npm:devexpress-gantt@4.1.33/package.json', ], }; System.config(window.config);
    <!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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.11.8/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>