Vue TagBox - fieldAddons

Specifies TagBox input field addons.

Selector: DxFieldAddons

Type:

Default Value: null

Field addons are custom markup containers that you can add to either side of the TagBox input field. The component arranges visual elements in the following order: beforeTemplate, TagBox input, afterTemplate.

jQuery

index.js

$('#tag-box-container').dxTagBox({
    fieldAddons: {
        beforeTemplate(data, element) {
            element.append(
                $('<i>').addClass('dx-icon-chevronprev'),
            );
        },
        afterTemplate(data, element) {
            element.append(
                $('<i>').addClass('dx-icon-chevronnext'),
            );
        },
    },
})

Angular

app.component.html

<dx-tag-box ... >
    <dxo-tag-box-field-addons
        beforeTemplate="beforeTagBox"
        afterTemplate="afterTagBox"
    ></dxo-tag-box-field-addons>
    <div *dxTemplate="let data of 'beforeTagBox'">
        <i class="dx-icon-chevronprev"></i>
    </div>
    <div *dxTemplate="let data of 'afterTagBox'">
        <i class="dx-icon-chevronnext"></i>
    </div>
</dx-tag-box>

Vue

App.vue

<script setup lang="ts">
import { DxTagBox, DxFieldAddons } from 'devextreme-vue/tag-box';

</script>

<template>
    <DxTagBox ... >
        <DxFieldAddons
            before-template="beforeTagBox"
            after-template="afterTagBox"
        />
        <template #beforeTagBox="{ data }">
            <i class="dx-icon-chevronprev"></i>
        </template>
        <template #after="{ data }">
            <i class="dx-icon-chevronnext"></i>
        </template>
    </DxTagBox>
</template>

React

App.tsx

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

function beforeTagBoxRender(data) {
    return (
        <i class="dx-icon-chevronprev"></i>
    );
}

function afterTagBoxRender(data) {
    return (
        <i class="dx-icon-chevronnext"></i>
    );
}

function App() {
    return (
        <TagBox ... >
            <FieldAddons
                beforeRender={beforeTagBoxRender}
                afterRender={afterTagBoxRender}
            />
        </TagBox>
    );
}

SelectBox Demo