ChipList

23 Sep 202513 minutes to read

A chip component is a small block of essential information, mostly used on contacts or filter tags.

<div id="chip"></div>

<script>
var chipObj = new ChipList();
chipObj.appendTo("#chip");
</script>

Properties

allowDragAndDrop boolean

Specifies a boolean value that indicates whether the chip item can be dragged and reordered.
This enables drag-and-drop functionality within a single container or across multiple containers of chips when dragging is enabled.

Defaults to false

avatarIconCss string

Specifies the icon CSS class for the avatar in the chip.

    <div id="chip"></div>
    <style>
        #chip .anne {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/anne.png')
        }
    </style>

    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: [{
        "text": "Anne",
        "avatarIconCss": "anne"
    }]}, '#chip');

Defaults to ’’

avatarText string

Specifies the customized text value for the avatar in the chip.

    <div id="chip"></div>

    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: [{
        "text": "Andrew",
        "avatarText": "A"
    }]}, '#chip');

Defaults to ’’

chips string[]|number[]|ChipModel[]

This chips property helps to render ChipList component.

    <div id="chip"></div>

    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret']}, '#chip');

Defaults to []

cssClass string

Specifies the custom classes to be added to the chip element used to customize the ChipList component.

    <div id="chip"></div>

    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Janet Leverling'], cssClass: "e-outline"
    }, '#chip');

Defaults to ’’

dragArea HTMLElement|string

Specifies the target in which the draggable element can be moved and dropped.
By default, the draggable element movement occurs in the page.

Defaults to null

enableDelete boolean

Enables or disables the delete functionality of a chip.

    <div id="chip"></div>

    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret'],enableDelete: true}, '#chip');

Defaults to false

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled boolean

Specifies a value that indicates whether the chip component is enabled or not.

Defaults to true

htmlAttributes { : }

Allows additional HTML attributes such as aria labels, title, name, etc., and
accepts n number of attributes in a key-value pair format.

Defaults to {}

leadingIconCss string

Specifies the leading icon CSS class for the chip.

    <div id="chip"></div>
    <style>
        #chip .janet {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
        }
    </style>

    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: [{
        "text": "Janet",
        "leadingIconCss": "janet"
    }]}, '#chip');

Defaults to ’’

leadingIconUrl string

Specifies the leading icon url for the chip.

Defaults to ’’

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

selectedChips string[]|number[]|number

Sets or gets the selected chip items in the chip list.

    <div id="chip"></div>

    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({ chips: ['Send a text', 'Set a remainder', 'Read my emails ', 'Set alarm'], selection: 'Multiple', selectedChips: [1, 3] }, '#chip');

Defaults to []

selection Selection

Defines the selection type of the chip. The available types are:

Input chip
Choice chip
Filter chip
Action chip

Defaults to ‘None’

text string

Specifies the text content for the chip.

    <div id="chip"></div>

    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: [{
        "text": "Anne",
    }]}, '#chip');

Defaults to ’’

trailingIconCss string

Specifies the trailing icon CSS class for the chip.

    <div id="chip"></div>

    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: [{
            "text": "Margaret",
            "trailingIconCss": "e-dlt-btn"
    }]}, '#chip');

Defaults to ’’

trailingIconUrl string

Specifies the trailing icon url for the chip.

Defaults to ’’

Methods

add

Allows adding the chip item(s) by passing a single or array of string, number, or ChipModel values.

Parameter	Type	Description
chipsData	`string[]` \| `number[]` \| `ChipModel[]` \| `string` \| `number` \| `ChipModel`	We can pass array of string or array of number or array of chip model or string data or number data or chip model.

Returns void

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event
handler	`Function`	Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	`string` \| `HTMLElement`	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.

    <div id="chip"></div>

    import { ChipList } from '@syncfusion/ej2-buttons';
    let chip =new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret']},'#chip');
    chip.destroy();

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

find

A function that finds chip based on given input.

Parameter	Type	Description
fields	`number` \| `HTMLElement`	We can pass index number or element of chip.

Returns ChipDataArgs

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

getSelectedChips

Returns the selected chip(s) data.

    import { ChipList } from '@syncfusion/ej2-buttons';
    let chip =new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret'],selection:'Multiple', selectedChips: [1, 3]},'#chip');
    alert('Selected items : '+chip.getSelectedChips().data);

Returns SelectedItem | SelectedItems | undefined

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

remove

Allows removing the chip item(s) by passing a single or array of string, number, or ChipModel values.

    <div id="chip"></div>

    import { ChipList } from '@syncfusion/ej2-buttons';
    let chip =new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret']},'#chip');
    chip.remove([0]);
```<br> |

Returns *void*

### removeEventListener

Removes the handler from the given event listener.

| Parameter | Type | Description |
|------|------|-------------|
| eventName |  `string` | A String that specifies the name of the event to remove |
| handler |  `Function` | Specifies the function to remove |

Returns *void*

### select

Allows selecting the chip item(s) by passing a single or array of string, number, or ChipModel values.

Returns *void*

### Inject

Dynamically injects the required modules to the component.

| Parameter | Type | Description |
|------|------|-------------|
| moduleList |  `Function[]` | ? |

Returns *void*

## Events

<h3 class="doc-prop-wrapper" id="beforeclick" data-Path="beforeclick-beforeClick"><span class='doc-prop-name'>beforeClick</span>

<span class="doc-prop-type"><span class="exclude-righttoc"><a href="./clickeventargs" class="doc-type-link exclude-righttoc">EmitType&lt;ClickEventArgs&gt;</a></span></span>

</h3>


Triggers before the click event of the chip is fired.
This event can be used to prevent the further process and restrict the click action over a chip.

```html
    <div id="chip"></div>

    import { ChipList, ClickEventArgs } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret'], selection: "Single", 
        beforeClick: (e: ClickEventArgs)=>{
            alert('you have selected ' + e.text)
        }
    }, '#chip');

click EmitType<ClickEventArgs>

Triggers when a chip is clicked.

    <div id="chip"></div>

    import { ChipList, ClickEventArgs } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Send a text', 'Set a remainder', 'Read my emails ', 'Set alarm'],
        click: (e: ClickEventArgs)=>{
            alert('you have clicked ' + e.text)
        } 
    }, '#chip');

created EmitType<Event>

Triggers when the component is created successfully.

    <div id="chip"></div>

    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Janet Leverling'],
        created: (e: Event)=>{
            alert('Component rendered successfully')
        } 
    }, '#chip');

delete EmitType<DeleteEventArgs>

Fires before removing the chip element.

    <div id="chip"></div>

    import { ChipList, DeleteEventArgs } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret'],enableDelete: true,  
        delete: (e: DeleteEventArgs)=>{
            alert('you have deleted ' + e.text)
        }
    }, '#chip');

deleted EmitType<ChipDeletedEventArgs>

Triggers when the chip item is removed.

dragStart EmitType<DragAndDropEventArgs>

Fires when a chip item starts moving due to a drag action.

dragStop EmitType<DragAndDropEventArgs>

Fires when a chip item is reordered after completing a drag action.

dragging EmitType<DragAndDropEventArgs>

Fires while a chip item is being dragged.