We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to make selected items as chips when mode=checkbox


I am using multiselect dropdown with mode='CheckBox', but at the mean time I also want the selected items in text field to be chips instead of comma seperated text.
Is there way to do that? Thank you

        @focus="hasFocus = true"
        @blur="hasFocus = false"
        :placeholder="placeholder && !showLabel ? placeholder : null"

5 Replies

SN Sevvandhi Nagulan Syncfusion Team January 11, 2020 11:02 AM UTC

Hi Luke, 

Greetings from Sycnfusion support. 

We have checked the reported requirement. We prepared the sample with CheckBox mode and when you select the value, selected value will be displayed as chips. Kindly refer the below code example, 

    onChange: function(args) { 
        var multiSelectObj = this.$refs.multiSelectObj.ej2Instances; 
        if (multiSelectObj.viewWrapper) { 
            multiSelectObj.viewWrapper.style.display = 'none'; 
        multiSelectObj.chipCollectionWrapper.style.display = 'block'; 
        let inputPos = multiSelectObj.overAllWrapper.getBoundingClientRect() 
        let popupPos = multiSelectObj.popupWrapper && multiSelectObj.popupWrapper.getBoundingClientRect(); 
        if (inputPos && popupPos && (inputPos.top + inputPos.height > popupPos.top)) { 
            multiSelectObj.popupWrapper.style.top = (inputPos.top + inputPos.height) + 'px'; 
    onSelect: function(args) { 
        var multiSelectObj = this.$refs.multiSelectObj.ej2Instances; 
        multiSelectObj.addChip(args.itemData.Game, args.itemData.Id, args.e); 
        setTimeout(this.onChange, 5) 
    onCreated: function() { 
        var multiSelectObj = this.$refs.multiSelectObj.ej2Instances; 
        multiSelectObj.chipCollectionWrapper = multiSelectObj.createElement('span', { 
            className: 'e-chips-collection', 
            styles: 'display:none' 
        //multiSelectObj.value = ['Game1','Game2']; // You can set the preselect the value 
    onFocus: function(args) { 
        document.getElementsByClassName('e-delim-view')[0].style.display = 'none'; 
    onSelectAll: function(args) { 
        var multiSelectObj = this.$refs.multiSelectObj.ej2Instances; 
    onRemove: function(args) { 
        setTimeout(this.onChange, 5); 

Please find the sample below, 

Sevvandhi N 

KH Khushbu July 19, 2021 02:21 PM UTC

How to make selected items as chips when mode=checkbox in react js

SN Sevvandhi Nagulan Syncfusion Team July 20, 2021 09:40 AM UTC

Hi Khushbu, 

Greetings from Syncfusion support. 

Please find the sample in react platform for the mentioned requirement. 

Sevvandhi N 

LO Louis Ormerod replied to Sevvandhi Nagulan October 29, 2021 01:15 AM UTC

It's more straightforward to shift over to using the Dropdown Tree component, which supports checkboxes with chips out of the box.


BC Berly Christopher Syncfusion Team October 29, 2021 06:20 AM UTC

Hi Louis Ormerod,

Please let us know if you need further assistance on this.

Berly B.C

Live Chat Icon For mobile
Up arrow icon