All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Overview

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

View Demo

The following code adds the TagBox to your page. The simplest configuration of the UI component requires only a dataSource to be specified. In addition, you can specify the placeholder to be displayed when the TagBox is empty.

jQuery
HTML
JavaScript
<div id="tagBoxContainer"></div>
$(function() {
    $("#tagBoxContainer").dxTagBox({
        dataSource: [
            "HD Video Player",
            "SuperHD Video Player",
            "SuperPlasma 50",
            // ...
        ],
        placeholder: "Select products..."
    });
});
Angular
HTML
TypeScript
<dx-tag-box
    [dataSource]="products"
    placeholder="Select products...">
</dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    products = [
        "HD Video Player",
        "SuperHD Video Player",
        "SuperPlasma 50",
        // ...
    ];
}
@NgModule({
     imports: [
         // ...
         DxTagBoxModule
     ],
     // ...
 })
Vue
<template>
    <DxTagBox
        :data-source="dataSource"
        placeholder="Select products..."
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTagBox } from 'devextreme-vue/tag-box';

export default {
    components: {
        DxTagBox
    },
    data() {
        return {
            dataSource: [
                'HD Video Player',
                'SuperHD Video Player',
                'SuperPlasma 50',
                // ...
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TagBox } from 'devextreme-react/tag-box';

const dataSource = [
    'HD Video Player',
    'SuperHD Video Player',
    'SuperPlasma 50',
    // ...
];

class App extends React.Component {
    render() {
        return (
            <TagBox
                dataSource={dataSource}
                placeholder="Select products..."
            />
        );
    }
}

export default App;

If your data is an array of objects, specify:

  • valueExpr
    The data field whose value will be written into the value property.
  • displayExpr
    The data field whose value will be displayed in the drop-down list and in the input field of the UI component.
jQuery
JavaScript
const tagBoxData = [
    { id: 1, country: "Afghanistan" },
    { id: 2, country: "Albania" },
    // ...
];

$(function() {
    $("#tagBoxContainer").dxTagBox({
        dataSource: tagBoxData,
        valueExpr: 'id',
        displayExpr: 'country'
    });
});
Angular
HTML
TypeScript
<dx-tag-box
    [dataSource]="tagBoxData"
    valueExpr="id"
    displayExpr="country">
<dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    tagBoxData = [
        { id: 1, country: "Afghanistan" },
        { id: 2, country: "Albania" },
        // ...
    ];
}
@NgModule({
     imports: [
         // ...
         DxTagBoxModule
     ],
     // ...
 })
Vue
<template>
    <DxTagBox
        :data-source="tagBoxData"
        value-expr="id"
        display-expr="country"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTagBox } from 'devextreme-vue/tag-box';

export default {
    components: {
        DxTagBox
    },
    data() {
        return {
            tagBoxData: [
                { id: 1, country: 'Afghanistan' },
                { id: 2, country: 'Albania' },
                // ...
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TagBox } from 'devextreme-react/tag-box';

const tagBoxData = [
    { id: 1, country: 'Afghanistan' },
    { id: 2, country: 'Albania' },
    // ...
];

class App extends React.Component {
    render() {
        return (
            <TagBox
                dataSource={tagBoxData}
                valueExpr="id"
                displayExpr="country"
            />
        );
    }
}

export default App;
See Also