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.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 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.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;

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery TagBox - Overview

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also