All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Overview

The TagBox widget 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 widget 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.common.css';
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.common.css';
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 option.
  • displayExpr
    The data field whose value will be displayed in the drop-down list and in the input field of the widget.
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.common.css';
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.common.css';
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